Shulou(Shulou.com)06/02 Report--

This article will explain in detail how to use the virtual list of Weixin Mini Programs (Mini). Xiaobian thinks it is quite practical, so share it with you for reference. I hope you can gain something after reading this article.

What is a virtual list?

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

demo效果

准备工作

计算一屏可展示多少个列表。

盒子的高度。

滚动中起始位置。

滚动中结束位置。

滚动偏移量。

屏高&盒子高度

在小程序中我们可以利用wx.createSelectorQuery来获取屏高以及盒子的高度。

getEleInfo( ele ) { return new Promise( ( resolve, reject ) => { const query = wx.createSelectorQuery().in(this); query.select( ele ).boundingClientRect(); query.selectViewport().scrollOffset(); query.exec( res => { resolve( res ); }) })},this.getEleInfo('.stock').then( res => { if (!res[0]) retuen; // 屏高 this.screenHeight = res[1].scrollHeight; // 盒子高度 this.boxhigh = res[0].height;})

起始&结束&偏移

onPageScroll(e) { let { scrollTop } = e; this.start = Math.floor(scrollTop / this.boxhigh); this.end = this.start + this.visibleCount; this.offsetY = this.start * this.boxhigh; }

scrollTop可以理解为距离顶部滚过了多少个盒子 / 盒子的高度 = 起始下标

起始 + 页面可视区域能展示多少个盒子 = 结束

起始 * 盒子高度 = 偏移

computed: { visibleData() { return this.data.slice(this.start, Math.min(this.end, this.data.length)) },}

当start以及end改变的时候我们会使用slice(this.start,this.end)进行数据变更，这样标签的内容就行及时进行替换。

优化

快速滚动时底部会出现空白区域是因为数据还没加载完成，我们可以做渲染三屏来保证滑动时数据加载的比较及时。

prevCount() { return Math.min(this.start, this.visibleCount);},nextCount() { return Math.min(this.visibleCount, this.data.length - this.end);},visibleData() { let start = this.start - this.prevCount, end = this.end + this.nextCount; return this.data.slice(start, Math.min(end, this.data.length))},

如果做了前屏预留偏移的计算就要修改下：this.offsetY = this.start * this.boxhigh - this.boxhigh * this.prevCount

滑动动时候start、end、offsetY一直在变更，频繁调用setData，很有可能导致小程序内存超出闪退，这里我们在滑动的时候做个节流，稀释setData执行频率。

mounted() { this.deliquate = this.throttle(this.changeDeliquate, 130) }， methods: { throttle(fn, time) { var previous = 0; return function(scrollTop) { let now = Date.now(); if ( now - previous > time ) { fn(scrollTop) previous = now; } } }, changeDeliquate(scrollTop) { this.start = Math.floor(scrollTop / this.boxhigh); this.end = this.start + this.visibleCount; this.offsetY = this.start * this.boxhigh; console.log('执行setData') } }, onPageScroll(e) { let { scrollTop } = e; console.log('滚动================>>>>>>>') this.deliquate(scrollTop); }

As you can see from the figure above, each scroll almost lowers setData writes at least twice.

About "how to use virtual list of Weixin Mini Programs" this article is shared here. I hope the above content can be of some help to everyone so that you can learn more knowledge. If you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.