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模板