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

更新时间:2023-04-04 07:56:54 阅读：评论：0

前言

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

什么是虚拟列表？

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

d预言何其芳emo效果

准备工作

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

屏高&盒子高度

在小程财政学专业序中我们可以利用wx.createlectorquery来获取屏高以及盒子的高度。

geteleinfo( ele ) {    return new promi( ( resolve, reject ) => {        const query = wx.createlectorquery().in(this);        query.lect( ele ).boundingclientrect();        query.lectviewport().scrollofft();        query.exec( res => {            resolve( res );        })    })},this.geteleinfo('.stock').then( res => {    if (!res[0]) retuen;    // 屏高    this.screenheight = res[1].scrollheight;    // 盒子高度    this.boxhigh = res[0].hei普遍性寓于特殊性之中ght;})

起始&结束&偏移

onpagescroll(e) {    let { scrolltop } = e;    this.start = math.floor(scrolltop / this.boxhigh);    this.end = this.start + this.visiblecount;    this.offty = 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 =forget的过去式 this.start - this.prevcount,        end = this.end + this.nextcount;    return this.data.slice(start, math.min(end, this.data.length))},

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

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

    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.offty = this.start * this.boxhigh;             console.log('执行tdata')        }    },    onpagescroll(e) {let { scrolltop } = e;        console.log('滚动================>>>>>>>')        this.deliquate(scrolltop);    }

从上图可以看出，每次滚动差不多都降低了tdata至少两次的写入。

文中编写的demo在这里，有需要的可以进行参考。