快捷導(dǎo)航

微信小程序虛擬列表的應(yīng)用實(shí)例

更新時(shí)間：2021年12月28日 15:51:08 作者：劉煎蛋

虛擬列表不是什么神秘的東西,下面這篇文章主要給大家介紹了關(guān)于微信小程序虛擬列表的應(yīng)用實(shí)例,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

股票熱門榜單有4000多條，渲染到頁(yè)面上在盤中時(shí)還得實(shí)時(shí)更新，如果采用接口和分頁(yè)，當(dāng)下拉幾十頁(yè)的時(shí)候頁(yè)面會(huì)變的越來(lái)越卡并且還得實(shí)時(shí)更新，最后的做法是一開(kāi)始數(shù)據(jù)就從ws傳遞過(guò)來(lái)，我們只需要傳起始下標(biāo)和結(jié)束下標(biāo)即可，在頁(yè)面上我們也只生成幾個(gè)標(biāo)簽。大大減輕了渲染壓力。

什么是虛擬列表？

就只指渲染可視區(qū)域內(nèi)的標(biāo)簽，在滾動(dòng)的時(shí)候不斷切換起始和結(jié)束的下標(biāo)來(lái)更新視圖，同時(shí)計(jì)算偏移。

demo效果

準(zhǔn)備工作

計(jì)算一屏可展示多少個(gè)列表。
盒子的高度。
滾動(dòng)中起始位置。
滾動(dòng)中結(jié)束位置。
滾動(dòng)偏移量。

屏高&盒子高度

在小程序中我們可以利用wx.createSelectorQuery來(lái)獲取屏高以及盒子的高度。

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;
})

起始&結(jié)束&偏移

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可以理解為距離頂部滾過(guò)了多少個(gè)盒子 / 盒子的高度 = 起始下標(biāo)

起始 + 頁(yè)面可視區(qū)域能展示多少個(gè)盒子 = 結(jié)束?

起始 * 盒子高度 = 偏移

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

當(dāng)start以及end改變的時(shí)候我們會(huì)使用slice(this.start,this.end)進(jìn)行數(shù)據(jù)變更，這樣標(biāo)簽的內(nèi)容就行及時(shí)進(jìn)行替換。

優(yōu)化

快速滾動(dòng)時(shí)底部會(huì)出現(xiàn)空白區(qū)域是因?yàn)閿?shù)據(jù)還沒(méi)加載完成，我們可以做渲染三屏來(lái)保證滑動(dòng)時(shí)數(shù)據(jù)加載的比較及時(shí)。

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))
},

如果做了前屏預(yù)留偏移的計(jì)算就要修改下：this.offsetY = this.start * this.boxhigh - this.boxhigh * this.prevCount

滑動(dòng)動(dòng)時(shí)候start、end、offsetY一直在變更，頻繁調(diào)用setData，很有可能導(dǎo)致小程序內(nèi)存超出閃退，這里我們?cè)诨瑒?dòng)的時(shí)候做個(gè)節(jié)流，稀釋setData執(zhí)行頻率。

    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('執(zhí)行setData')
        }
    },
    onPageScroll(e) {
	let { scrollTop } = e;
        console.log('滾動(dòng)================>>>>>>>')
        this.deliquate(scrollTop);
    }