微信小程序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; …

Linux常用命令介绍

Linux ### 常用命令&#xff1a; 1、ls命令&#xff1a; 显示当前目录下文件和文件夹。 举例&#xff1a;在用户目录&#xff08;root&#xff09;使用ls可以查看用户里的文件及文件夹。 -l可以详细看列出文件及文件夹, ll命令等价与ls - l 2、cd命令 作用是切换目录。 …

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

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

百万成神-转自九边pro 的分享

1&#xff0c;如果一个人写代码写到10万行左右&#xff0c;也会出现下笔如有神的效果&#xff0c;很多时候自己都不知道自己怎么会想出这么复杂的套路和算法来。 2&#xff0c;我问过那个作者&#xff0c;他是怎么想到的&#xff0c;他说他也不知道&#xff0c;反正每天都写&am…

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;消费者主动…

【御控物联】 1、物联网介绍

文章目录 一、定义二、起源三、发展四、应用五、未来六、技术资料 一、定义 如何理解物联网&#xff0c;我们引用百度百科的一句话“把所有物品通过信息传感设备与互联网连接起来&#xff0c;进行信息交换&#xff0c;即物物相息&#xff0c;以实现智能化识别和管理”&#xf…

【数据结构】AVL树

AVL树 AVL树&#xff08;Adelson-Velsky和Landis树&#xff09;是一种自平衡二叉搜索树。它通过维护树的高度平衡来确保树的操作复杂度为O(log n)。它通过在每个节点上跟踪平衡因子来保持树的平衡。平衡因子是左子树和右子树高度之间的差值。 AVL树的特性 每个节点都有一个平…

机器学习——模型评价

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

Synchronized简述

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

大模型(LLM)与人类大脑的结构及运行机制的关系

大模型&#xff08;LLM&#xff0c;Large Language Model&#xff09;与人类大脑的结构及运行机制之间存在一些有趣的类比和潜在的关联&#xff0c;尽管两者在本质和实现方式上存在显著差异。 首先&#xff0c;从结构上来看&#xff0c;人类大脑是一个高度复杂和互联的网络&am…

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

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

springboot @ConditionalOnProperty注解

ConditionalOnProperty注解可以有条件的加载bean 比如有3个定时任务&#xff0c;想设置开关 1、配置中添加 config:schedule:enabled:aaaScheduler: truebbbScheduler: truecccScheduler: true 2、代码 Component ConditionalOnProperty(prefix "config.schedule.en…

【功能更新】强化知识库管理与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;本文实…

探索CSS世界中的色彩艺术:从基础到实战

在网页设计与布局中&#xff0c;CSS&#xff08;Cascading Style Sheets&#xff09;赋予了我们无尽的创作可能。其中&#xff0c;色彩作为视觉传达的重要元素&#xff0c;直接影响着网站的整体风格与用户体验。本篇教程将带领您踏上CSS颜色的探索之旅&#xff0c;从基础概念到…