uniapp 优化左右拖动长列表性能的一种方法

我的理解就是，当缓存的数据超过一定量时，就将其清空掉。因为列表数据越多，渲染到页面上的节点越多，页面操作起来会感觉到卡顿。

uniapp 实现左右拖动长列表，一般都是通过swiper+scroll-view实现左右拖动的长列表。swiper 里面每个 swiper-item 代表这一页，保存着这页的所拥有的数据。

<template>
    <view class="x">
        <-- 使用 scroll-view 实现 tab 栏， -->
        <scroll-view class="a" scroll-x>
            <view class="b">
                <view v-for="(item, index) in tabList" class="c" :class="index === tabIndex ? 'active-tab' : ''" :key="index"
                      @click="clickTab(index)">{{ item.name }}</view>
            </view>
        </scroll-view>
        <-- swiper -->
        <swiper class="d" :current="tabIndex" :duration="300" @change="handleChange">
            <swiper-item v-for="(item, index) in tabList" :key="index" class="e">
                <-- 页面组件，里面使用 scroll-view 组件 -->
                <news-page ref="pageRefList" :name="item.name" :newsid="item.newsid"></news-page>
            </swiper-item>
        </swiper>
    </view>
</template>

其实原理就是每次点击 tab 时去判断这页有没有数据，有就请求，没有就不请求。并且判断这页数据 (数组类型) 的长度，如果超过允许最大的缓存数据量 (比如说 30)，并且 tab 索引没有缓存，就把这页的 tab 索引缓存到一个数组中。

然后最多允许 3 页 (可以自己定义) 缓存超过允许最大的缓存数据量。超过了就清除掉第一页的缓存数据。

听不懂就看代码理解一下：

const MAX_LIST_NUMBER = 35
const MAX_TAB_NUMBER = 3

// 缓存 tab 集合
const cacheTabList = []
// 点击 tab 方法。第一次进入程序相当于执行了 clickTab(0)
// 传入参数为点击 tab 的索引
async function clickTab(index) {
    // 判断这页没有数据，就去加载它的数据。
    // 数据是保存再每个页面组件自身里的。
    if (pageRefList.value[index].list.length === 0) {
        await pageRefList.value[index].loadData()
    }

    // 如果页面保存的数据超过允许缓存的最大数据量，就把该页面的 tab 索引缓存起来，方便后续通过 ref 操作页面组件
    if (pageRefList.value[index].list.length > MAX_LIST_NUMBER) {
        if (cacheTabList.indexOf(index) < 0) {
            cacheTabList.push(index)
        }
    }
    
    // 如果超过允许的数据量的页面的数量超过了允许值(3)，就清空tab索引，清空缓存的第一页数据。
    if (cacheTabList.length > MAX_TAB_NUMBER) {
        cacheTabList.splice(0, 1);
        pageRefList.value[0].clear()
    }

    tabIndex.value = index
}

最后这里贴一下模板源码的地址，可以看看，加深对缓存优化的理解。

新闻资讯 App 模板