首页/ 填坑/ 文章详情

微信小程序下拉无限加载优化

微信小程序列表触底后,异步载入新的数据。随着页面数据多少,微信小程序的性能随之遭受考验:页面异常卡顿,严重闪屏,退出。微信小程序官方深知此问题,推出recycle-view组件,只为解决以下几个问题:

- 列表数据很大,首次 setData 的时候耗时高
- 渲染出来的列表 DOM 结构多,每次 setData 都需要创建新的虚拟树、和旧树 diff 操作耗时都比较高
- 渲染出来的列表 DOM 结构多,占用的内存高,造成页面被系统回收的概率变大。

对于常规显示可使用recycle-view组件,可recycle-view组件已封装好,灵活性大失。沿着其思路,打造私人定制版。主要监听滚动条,监听当前滚动位置,显示前后3页的数据

HTML<block wx:for="{{list}}"  wx:for-index="index" wx:for-item="item">
    <view class="item-box" style="height:{{item.height}}">
        <block wx:if="{{item.page >= current - 1 && item.page <= current + 1}}">
            <!-- 需要显示的内容 -->
        </block>
        <block wx:else>
            <!-- 占位符 -->
        </block>
    </view>
</block> 

JSdata: {
    list: [ 
        {id: 1, page: 1, height: 300},
        {id: 2, page: 1, height: 300},
        {id: 3, page: 2, height: 300},
        {id: 4, page: 2, height: 300},
        {id: 5, page: 3, height: 300},
        {id: 6, page: 3, height: 300},
    ],
    pageScrollHeight:{1:600,2:1200,3:1800} ,
    current: 1
},
onPageScroll: function(e) { // 监听滚动事件
    let scrollTop = e.scrollTop;
    this.setSwitchPage(scrollTop);
},
setSwitchPage: function(scrollTop) {
    var list = this.data.pageScrollHeight;
    var total = base.getDataLength(list);
    if(total == 0) {
        return false;
    }

    for(var i = total; i >= 0; i--) {
        var limit = i != 1 ? list[i-1]: 0;
        if (scrollTop >= limit && scrollTop <= list[i]) {
            if (this.data.current != i) {
                this.setData({'current': i });
            }
            return false;
        }
    }
} 

初始受Javascript的影响,想精确控制每个元素显示,判断元素位置,修改setData显示或隐藏。但微信小程序里,监听滚动太快,setData修改显示或隐藏会导致调用太多,反而变卡顿,意味着微调数据是不可能的

滚动只能减少使用setData,粗控显示内容,改成页数范围内显示。微信小程序setData修改数据有延时性,为了避免渲染空白,需要占位符,可参考微博小程序。

文章评论0 records

最新 最早

0

最新评论Latest comments

big2catbig2cat 08-27 16:11
然而没什么用,smartpss不兼容老录像机,就算能看回放,很多时间点在回放里也看不到
HentaiCatHentaiCat 2020-12-30 10:22
考科目二全程很紧张,考了三次才过,有次侧方入库直接pass,100分扣完,呜呜呜~
猫猫酱猫猫酱 2020-11-12 10:56
一入多肉深似海,说多都是泪
soulkunsoulkun 2020-11-05 15:54
IconFont的图标真的很好用!!!
无限链霉球菌无限链霉球菌 2020-11-03 11:41
药店,了解一下(`・ω・´)