这篇文章将为大家详细讲解有关微信小程序虚拟列表怎么用，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
就只指渲染可视区域内的标签，在滚动的时候不断切换起始和结束的下标来更新视图，同时计算偏移。
计算一屏可展示多少个列表。
盒子的高度。
滚动中起始位置。
滚动中结束位置。
滚动偏移量。
在小程序中我们可以利用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);
}
从上图可以看出，每次滚动差不多都降低了setData至少两次的写入。
关于“微信小程序虚拟列表怎么用”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
