微信小程序Skyline模式下瀑布长列表优化成虚拟列表,解决内存问题

微信小程序长列表,渲染的越多就会导致内存吃的越多。特别是长列表的图片组件和广告组件。

为了解决内存问题,所以看了很多人的资料,都不太符合通用的解决方式,很多需要固定子组件高度,但是瀑布流是无法固定的,所以需要找更好的方式。好在有一篇可以借鉴的文章在其基础上做了修改,解决了内存问题!

借鉴了以下文章的解决方式,由于借鉴章依旧存在内存泄漏问题,所以本文章改进后不再内存泄漏

借鉴文链接:解决小程序渲染复杂长列表,内存不足问题 - 掘金 (juejin.cn)

 进入下面小程序可以体验效果

 

 代码效果图

 老规矩,直接上代码,各位直接引用!

一、定义骨架组件

WXML:

<view class="list-item" id="list-item-{{skeletonId}}" style="min-height: {{height}}px;"><block wx:if="{{showSlot}}"><view style="height: 1px; z-index: 1;">{{parentIndex}},{{index}}</view><image style="width: 100%;height: 100%;" mode="aspectFill" src="https://img-blog.csdnimg.cn/direct/25e4d10c5187409d9190a2f47297503e.jpeg"></image></block>
</view>
<!-- 广告,不用可以直接去掉 -->
<block wx:if="{{(index+1)%12==0}}"><view class="adbk" style="min-height: {{(shkey==='list'||shkey==='tx')?'330px':'315px'}};{{showSlot?'background:#ffff':''}}"><block wx:if="{{showSlot}}"><ad-custom class="girdAd" unit-id="adunit-xxxxx"></ad-custom></block></view>
</block>

JS: 

// components/skeleton.js
let app = getApp() 
Component({lifetimes:{created(){//设置一个走setData的数据池this.extData = {listItemContainer: null,}},attached(){},detached() {try {this.extData.listItemContainer.disconnect()} catch (error) {}this.extData = null},ready() {this.setData({skeletonId: this.randomString(8), //设置唯一标识color:this.randomColor()})wx.nextTick(() => {// 修改了监听是否显示内容的方法,改为前后showNum屏高度渲染// 监听进入屏幕的范围relativeToViewport({top: xxx, bottom: xxx})let { windowHeight = 667 } = wx.getSystemInfoSync() //请自行优化这个取值let showNum = 2 //超过屏幕的数量,目前这个设置是上下2屏try {this.extData.listItemContainer = this.createIntersectionObserver()this.extData.listItemContainer.relativeToViewport({ top: showNum * windowHeight, bottom: showNum * windowHeight }).observe(`#list-item-${this.data.skeletonId}`, (res) => {let { intersectionRatio } = resif (intersectionRatio === 0) {// console.log('【卸载】', this.data.skeletonId, '超过预定范围,从页面卸载')this.setData({showSlot: false})} else {// console.log('【进入】', this.data.skeletonId, '达到预定范围,渲染进页面')this.setData({showSlot: true,height: res.boundingClientRect.height})}})} catch (error) {console.log(error)}})}},/*** 组件的属性列表*/properties: {parentIndex:{type:Number,value:0},index:{type:Number,value:0}},/*** 组件的初始数据*/data: {height: 0, //卡片高度,用来做外部懒加载的占位showSlot: true, //控制是否显示当前的slot内容skeletonId: '',color:'#7179b1',colorList:['#7179b1','#d66f33','#33d665','#cc33d6','#7233d6','#338bd6','#b5d2ea','#6f0c0c','#d43f8b','#00ccec','#2e666f','#ffcd18']},/*** 组件的方法列表*/methods: {/*** 生成随机的字符串*/randomString(len) {len = len || 32;var $chars = 'abcdefhijkmnprstwxyz2345678'; /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/var maxPos = $chars.length;var pwd = '';for (var i = 0; i < len; i++) {pwd += $chars.charAt(Math.floor(Math.random() * maxPos));}return pwd;},randomColor(){let num = Math.ceil(Math.random()*10);return this.data.colorList[num];}}
})

WXSS:

.girdAd{border-radius: 10px;z-index: 11;
}
.adbk{background: #636363;border: 1px solid #f3f3f3;border-radius: 10px;margin-top: 10px;
}.adloading{line-height: 300px;color: rgb(255, 255, 255);text-align: center;position: absolute;right: 23%;
}

 二、业务代码使用骨架组件

业务代码中,就是数组的数据需要频繁的使用setData这个接口,所以需要避免频繁操作。

将list 数据改成二位数组。

json需要引入:    "skeleton":"/components/skeleton/skeleton"

WXML:

<scroll-view style="height: 100vh;"type="custom"scroll-y="{{true}}" lower-threshold="{{100}}"scroll-top="0"scroll-with-animation="{{true}}" bindscrolltolower="loadmore"><grid-view type="masonry" cross-axis-count="{{2}}" cross-axis-gap="{{10}}" main-axis-gap="{{10}}" padding="{{[5,5,0,5]}}"><block wx:for-item="parentItem" wx:for-index="parentIndex" wx:for="{{list}}" wx:key="{{parentIndex}}"><!-- 这个view仅作为间隔区分展示用,并不是必须的 --><block wx:if="{{parentIndex!=0}}"wx:for="{{parentItem}}" wx:key="{{index}}" ><!-- 使用 --><skeleton parentIndex="{{parentIndex}}" index="{{index}}"></skeleton></block></block></grid-view>
</scroll-view>

JS:


Component({lifetimes:{created(){this.loadmore()}},data: {list: [[{}]]},methods: {loadmore: function() {//过长的list需要做二维数组,因为setData一次只能设置1024kb的数据量,如果过大的时候,就会报错//二维数组每次只设置其中一维,所以没有这个问题let nowList = `list[${this.data.list.length}]`let demoList = this.getList(100)this.setData({[nowList]: demoList})},/*** 每次吸入num条数据*/getList(num) {let list = []for (let i = 0; i < num; i++) {list.push({height: this.getRadomHeight()})}return list    },/*** 生成随机(100, 400)高度*/getRadomHeight() {return parseInt(Math.random()*100 + 300)}},
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/813265.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

推荐一款轻量级的hosts文件编辑器(免安装版)

在管理和编辑hosts文件时&#xff0c;一款简单而有效的工具是非常重要的。下面推荐一款免安装版的轻量级hosts文件编辑器&#xff0c;让你轻松管理你的hosts文件。 windows系统默认hosts文件位置 下载地址&#xff1a;https://www.alipan.com/s/8kSns9eAi9f

CSS aspect-ratio属性设置元素宽高比

aspect-ratio 是CSS的一个属性&#xff0c;用于设置元素的期望宽高比。它设置确保元素保持特定的比例&#xff0c;不受其内容或容器大小的影响。 语法&#xff1a; aspect-ratio: <ratio>;其中 <ratio> 是一个由斜杠&#xff08;/&#xff09;分隔的两个数字&…

代码随想录第39天 | 62.不同路径 、 63. 不同路径 II

一、前言 参考文献&#xff1a;代码随想录 今天主要的题目是动态规划的路径问题&#xff0c;动态规划五要点&#xff1b; 1、确定dp数组&#xff0c;dp[i]代表什么i代表什么&#xff1b; 2、递推公式&#xff1b; 3、初始化dp数组&#xff1b; 4、遍历顺序&#xff1b; …

uniapp APP真机调试接口请求不到服务器解决方法

项目场景&#xff1a; 在使用Hbuilder开发uniapp的过程中&#xff0c;出现了两个在 Chrome 调试中正常&#xff0c;但打包后异常的问题&#xff0c;特此记录。 问题描述 在 H5 端请求接口正常请求。 App 端 请求接口&#xff0c;提示 "{"errMsg":"reque…

R语言数据可视化:基本绘图系统

目录 plot函数 par函数 hist函数 boxplot函数 plot函数应用实战 全局参数 R语言中有三大绘图系统包括基本绘图系统&#xff0c;Lattice绘图系统&#xff0c;ggplot2绘图系统 基本绘图系统 在R语言中&#xff0c;以下函数通常用于创建和定制图形&#xff1a; plot 函数…

网络通信三要素:IP、端口和协议

IP&#xff1a;设备在网络中的地址&#xff0c;是唯一的标识 IP&#xff1a;全程”互联网协议地址“&#xff0c;是分配给上网设备的唯一标志 IP地址有两种形式&#xff1a; IPv4&#xff1a;32位 IPv6&#xff1a;共128位。分成8段表示&#xff0c;每取四位编码成一个16进制…

分布式技术---------------消息队列中间件之 Kafka

目录 一、Kafka 概述 1.1为什么需要消息队列&#xff08;MQ&#xff09; 1.2使用消息队列的好处 1.2.1解耦 1.2.2可恢复性 1.2.3缓冲 1.2.4灵活性 & 峰值处理能力 1.2.5异步通信 1.3消息队列的两种模式 1.3.1点对点模式&#xff08;一对一&#xff0c;消费者主动…

机器学习——模型评价

概述 在机器学习中&#xff0c;模型评价是评估和比较不同模型性能的关键步骤之一。它是通过对模型的预测结果与真实标签进行比较&#xff0c;从而量化模型的预测能力、泛化能力和稳定性。模型评价旨在选择最佳的模型&#xff0c;理解模型的行为&#xff0c;并为模型的改进提供…

Synchronized简述

1.了解Synchrozied Synchrozied是一种悲观锁&#xff0c;通过Synchroized实现同步机制&#xff0c;在操作数据时&#xff0c;判断该对象是否被锁定&#xff0c;如果被锁定则进入阻塞状态直到被占用的线程释放&#xff0c;如果没有被锁或者当前线程已经存在操作对象的锁则进行上…

SpringBoo利用 MDC 机制过滤出单次请求相关的日志

&#x1f3f7;️个人主页&#xff1a;牵着猫散步的鼠鼠 &#x1f3f7;️系列专栏&#xff1a;Java全栈-专栏 &#x1f3f7;️个人学习笔记&#xff0c;若有缺误&#xff0c;欢迎评论区指正 目录 1.前言 2.MDC 是什么 3.代码实战 4.总结 1.前言 在服务出现故障时&#xff…

【功能更新】强化知识库管理与AI问答机器人性能

三月HelpLook带来了3大类功能焕新&#xff0c;主要聚焦于&#xff1a;知识库的管理功能升级和AI问答机器人的优化&#xff0c;让我们看看更新了哪些新功能&#xff01; 那么&#xff0c;接下来就让我们来详细了解一下本次升级都带来了哪些新功能吧&#xff01; 知识库使用与管理…

【Linux】应用层协议:HTTP

URL 在之前的文章中我们实现了一个网络版本的计算器&#xff0c;在那个计算器中揉合了协议定制以及序列化反序列化的内容&#xff0c;我们当时也自己定制了一套协议标准&#xff0c;比如请求和响应的格式应该是什么&#xff1f;如何读到一个完整的报文&#xff1f;支持的运算符…

【路径规划】基于六次多项式的多关节机器人避障路径规划

最近迷上了机械臂避障轨迹规划&#xff0c;因为之前一直做的都是无障碍物轨迹规划&#xff0c;所以这次想试一下有障碍物的&#xff0c;把避障算法用在我的SimMechanics机械臂上&#xff0c;看看效果咋样。以下定义不区分路径规划和轨迹规划。   by the way&#xff0c;本文实…

二叉树的定义和基本术语及性质

二叉树是一种特殊的树形数据结构&#xff0c;它对每个节点的子节点数进行了限制&#xff0c;即每个节点最多有两个子节点。这种结构使得二叉树成为了许多算法和数据结构的基础&#xff0c;如二叉搜索树、堆、哈夫曼编码等。本文将详细探讨二叉树的定义、基本术语和性质&#xf…

BGP扩展知识总结

一、BGP的宣告问题 在BGP协议中每台运行BGP的设备上&#xff0c;宣告本地直连路由在BGP协议中运行BGP协议的设备&#xff0c;来宣告通过IGP学习到的未运行BGP协议设备产生的路由&#xff1b;&#xff08;常见&#xff09; 在BGP协议中宣告本地路由表中路由条目时&#xff0c;将…

DNF手游攻略:2024新手攻略大全

在《DNF手游》的世界中&#xff0c;前期阶段对于新手玩家来说至关重要。以下是一份综合整理的新手攻略&#xff0c;帮助玩家快速适应游戏并取得进展。 1. 角色建立策略&#xff1a; 在前期&#xff0c;建议玩家建立3个角色&#xff0c;包括1个大号和2个小号。大号可以根据个人喜…

谷歌google浏览器无法更新Chrome至最新版本怎么办?浏览器Chrome无法更新至最新版本

打开谷歌google浏览器提示&#xff1a;无法更新Chrome&#xff0c;Chrome无法更新至最新版本&#xff0c;因此您未能获得最新的功能和安全修复程序。点击「重新安装Chrome」后无法访问此网站&#xff0c;造成谷歌浏览器每天提示却无法更新Chrome至最新版本。 谷歌google浏览器无…

SaaS知识库哪些比较好用?中小企业也能适用

在快节奏的商业世界中&#xff0c;拥有一个高效、易于使用的知识管理工具是提升工作效率的关键。对于中小企业来说&#xff0c;选择合适的SaaS&#xff08;软件即服务&#xff09;知识库平台尤为重要&#xff0c;因为它不仅能帮助员工快速找到信息&#xff0c;而且还能优化客户…

数据结构进阶之堆

今天我们学习的是数据结构里面的堆&#xff0c;大家先看看我们今天要学习的内容 一、堆概念及认识 在学习堆之前我们得先明白完全二叉树是什么样子&#xff0c;因为堆是依据完全二叉树的结构来实现的&#xff0c;所以在这里我先告诉大家完全二叉树的是什么&#xff0c;如下图…

Excel中输入数字会改变怎么办?

一、数字显示不全&#xff0c;以“#”号代替 随着列宽的缩小&#xff0c;数字逐渐被“#”号代替&#xff08;首先数字的格式是“数值型&#xff0c;且只有整数”&#xff09; 原因分析&#xff1a;单元格中的数字无法完全显示&#xff0c;Excel会自动用“#”号填充剩余的空间 解…