耀极客论坛

 找回密码
 立即注册
查看: 411|回复: 0

微信小程序虚拟列表的应用实例

[复制链接]

336

主题

318

帖子

22万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
220555
发表于 2022-5-8 01:54:19 | 显示全部楼层 |阅读模式
  虚拟列表不是什么神秘的东西,下面这篇文章主要给大家介绍了关于微信小程序虚拟列表的应用实例,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

前言
  股票热门榜单有4000多条,渲染到页面上在盘中时还得实时更新,如果采用接口和分页,当下拉几十页的时候页面会变的越来越卡并且还得实时更新,最后的做法是一开始数据就从ws传递过来,我们只需要传起始下标和结束下标即可,在页面上我们也只生成几个标签。大大减轻了渲染压力。

什么是虚拟列表?

  就只指渲染可视区域内的标签,在滚动的时候不断切换起始和结束的下标来更新视图,同时计算偏移。

demo效果


准备工作
       
  • 计算一屏可展示多少个列表。   
  • 盒子的高度。   
  • 滚动中起始位置。   
  • 滚动中结束位置。   
  • 滚动偏移量。

屏高&盒子高度
  在小程序中我们可以利用wx.createSelectorQuery来获取屏高以及盒子的高度。
  1. getEleInfo( ele ) {
  2.     return new Promise( ( resolve, reject ) => {
  3.         const query = wx.createSelectorQuery().in(this);
  4.         query.select( ele ).boundingClientRect();
  5.         query.selectViewport().scrollOffset();
  6.         query.exec( res => {
  7.             resolve( res );
  8.         })
  9.     })
  10. },
  11. this.getEleInfo('.stock').then( res => {
  12.     if (!res[0]) retuen;
  13.     // 屏高
  14.     this.screenHeight = res[1].scrollHeight;
  15.     // 盒子高度
  16.     this.boxhigh = res[0].height;
  17. })
复制代码
  起始&结束&偏移
  1. onPageScroll(e) {
  2.     let { scrollTop } = e;
  3.     this.start = Math.floor(scrollTop / this.boxhigh);
  4.     this.end = this.start + this.visibleCount;
  5.     this.offsetY = this.start * this.boxhigh;
  6. }
复制代码
  scrollTop可以理解为距离顶部滚过了多少个盒子 / 盒子的高度 = 起始下标
  起始 + 页面可视区域能展示多少个盒子 = 结束 
  起始 * 盒子高度 = 偏移
  1. computed: {
  2.     visibleData() {
  3.         return this.data.slice(this.start, Math.min(this.end, this.data.length))
  4.     },
  5. }
复制代码
  当start以及end改变的时候我们会使用slice(this.start,this.end)进行数据变更,这样标签的内容就行及时进行替换。

优化
  快速滚动时底部会出现空白区域是因为数据还没加载完成,我们可以做渲染三屏来保证滑动时数据加载的比较及时。
  1. prevCount() {
  2.     return Math.min(this.start, this.visibleCount);
  3. },
  4. nextCount() {
  5.     return Math.min(this.visibleCount, this.data.length - this.end);
  6. },
  7. visibleData() {
  8.     let start = this.start - this.prevCount,
  9.         end = this.end + this.nextCount;
  10.     return this.data.slice(start, Math.min(end, this.data.length))
  11. },
复制代码
  如果做了前屏预留偏移的计算就要修改下:this.offsetY = this.start * this.boxhigh - this.boxhigh * this.prevCount
  滑动动时候start、end、offsetY一直在变更,频繁调用setData,很有可能导致小程序内存超出闪退,这里我们在滑动的时候做个节流,稀释setData执行频率。
  1.     mounted() {
  2.         this.deliquate = this.throttle(this.changeDeliquate, 130)
  3.     },
  4.     methods: {
  5.         throttle(fn, time) {
  6.             var previous = 0;
  7.             return function(scrollTop) {
  8.                 let now = Date.now();
  9.                 if ( now - previous > time ) {
  10.                     fn(scrollTop)
  11.                     previous = now;
  12.                 }
  13.             }
  14.         },
  15.         changeDeliquate(scrollTop) {
  16.             this.start = Math.floor(scrollTop / this.boxhigh);
  17.             this.end = this.start + this.visibleCount;
  18.             this.offsetY = this.start * this.boxhigh;
  19.             console.log('执行setData')
  20.         }
  21.     },
  22.     onPageScroll(e) {
  23. let { scrollTop } = e;
  24.         console.log('滚动================>>>>>>>')
  25.         this.deliquate(scrollTop);
  26.     }
复制代码

  从上图可以看出,每次滚动差不多都降低了setData至少两次的写入。
  文中编写的demo在这里,有需要的可以进行参考。

总结
  到此这篇关于微信小程序虚拟列表应用的文章就介绍到这了,更多相关小程序虚拟列表内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-12-10 02:41 , Processed in 0.068679 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表