实现原生微信小程序虚拟列表-Toy模板网

这篇具有很好参考价值的文章主要介绍了实现原生微信小程序虚拟列表。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

微信虚拟列表

小程序的setData每一次调用，都会重新和旧的虚拟dom进行diff对比，如果页面列表比较大的话，不断频繁加载setData，实际上是非常消耗性能的，所以也是为了解决这个考虑，我虽然每一次都在使用setData加载数据，但是setData加载完成的数据，我并不是直接渲染，而是通过wxml中微信小程序提供的脚本wxs进行逻辑的截取，我把截取下来的数据进行视图渲染，我会在以下讲解我实现的思路；
第一我是通过微信小程序提供动态获取屏幕宽高的wx.getSystemInfoSync().screenHeight拿到高度，这样我在和每一个渲染的列表高度进行计算，动态拿到了可视区域内可以渲染的节点，这样的话，每一次我只要动态截取可容纳可视区域渲染的这些元素节点来渲染就可以大大的保证性能了；
将微信小程序中的rpx转换成为px，因为我在实现页面布局的时候是rpx，所以我在获取正确列表正确高度的时候肯定是rpx；
通过可视区域计算出列表的开始索引startIndex和可视区域结束的索引endIndex；
在页面脚本截取数据并且直接渲染页面；
对可视区域上层和可视区域下层的数据进行padding留白；
监听scroll-view组件的触底事件，对页面进行上拉加载，这里我没有实现下拉刷新，因为我个人觉得每一次数据加载最多也就是30条，数据量不大呀，对页面造成不了多大的渲染影响，这样也就没有必要实现下拉刷新；
因为我对可视区域上层和下层都加了空白，在页面滚动快的时候，会出现大量的空白，这种行为如果用户看到了，肯定觉得页面卡死了，体验非常的差，所以我扩大了截取数据的范围，原先我只截取可视区域的数据来渲染，现在不是，我还向上还多截取了一个可视区域的数据，向下也多截取了一个可视区域的数据，这样在页面不管是向上还是向下滚动的时候，就因为我截取的范围大而不会出现大量的空白了

虚拟列表组件视图层

虚拟列表视图层；

<wxs module="m1">
    var index = 0;
    var sliceIndex = 0;
    // 截取最后一个索引
    var endIndex = function (list, startIndex, size) {
        var idx = startIndex + size * 2;
        if (!list[idx]) {
            idx = list.length - 1;
        }
        index = idx;
        return idx;
    }
    // 截取渲染数组列表
    var showDataList = function (list, startIndex, size) {
        var start = 0;
        if (startIndex <= size) {
            start = 0;
        } else {
            start = startIndex - size;
        }
        return list.slice(start, index);
    }
    // 可视区渲染区域上层paddingTop会被填充空白
    var topBlack = function (startIndex, itemHeight, size) {
        var start = 0;
        if (startIndex <= size) {
            start = 0;
        } else {
            start = startIndex - size;
        }
        return start * itemHeight;
    }
    // 可视区渲染区域层下层paddingBottom会被填充空白
    var bootomBlack = function (list, itemHeight) {
        return (list.length - index) * itemHeight
    }
    module.exports = {
        showDataList: showDataList,
        topBlack: topBlack,
        bootomBlack: bootomBlack,
        endIndex: endIndex
    };
</wxs>


<view class="news-box">
    <scroll-view scroll-y="true" class="scroll-container" bindscroll="handlerScroll" bindscrolltolower="scrolltolower">
        <!-- 执行这个脚本获取到最新截取的最后索引 -->
        <view hidden="{
    {true}}">{
  {m1.endIndex(list,startIndex,size)}}</view>
        <!-- 向上1个可视区外被paddingTop撑满，向下1个可视区外被paddingBottom撑满 -->
        <view style="padding-top: {
       {
       m1.topBlack(startIndex,itemHeight,size)}}px;padding-bottom: {
       {
       m1.bootomBlack(list,itemHeight)}}px;">
            <!-- 渲染的列表 -->
            <view wx:for="{
    {m1.showDataList(list,startIndex,size)}}" wx:key="index">
                <navigator url="/pages/aticle/aticle