更新记录

0.1.0（2021-08-05）

第一版，估计在许多细节还有应用场景上还是有问题，目前只是在一个demo项目中使用了，如果您在使用中发现问题，还请反馈下，谢谢！

平台兼容性

前言

有些需求需要展示长列表，无限下拉都会一直显示出更多的数据。但是当一个页面展示的DOM节点过多的时候，会造成页面的卡顿严重的会直接白屏。

巧了，自己正好碰到了这方面的需求（微信小程序端），从插件市场找了下类似需求的插件，使用后，发现加载图片时会有严重的闪屏现象（重新渲染图片造成），然后暂时没发现其他可以用的插件（不是说插件市场没有啊，只是我暂时没搜到），然后恰巧又搜到了这篇文章【小程序长列表渲染优化另一种解决方案】

emmm,反正有实例代码，那就自己造个轮子吧，正好学习一下😄

性能不一定最好，但是恰好能满足我的需求，然后就分享给大家了，大家如果有什么更好的优化方法，还请不吝赐教；Nvue用原生的list性能应该会更好。

原理

以屏为单位，只渲染屏幕前后两屏的数据，不渲染的屏数用空白div占位。

特色❤️

• 图片不闪屏(应该不闪，目前我只测试了小程序端&&我提前设定了图片高度)

• 单块高度不需要统一

使用方法

在页面中使用

<uce-flatlist :windowHeight="screenHeight" @top="handleTop" @load="handleLoad" ref="flatlist" :customStyle="customStyle" @itemClick="itemClick">
    <template v-slot:default="{data,index}">
        <!-- 这里写自己的块内容就好 -->
        <view class="box">
            <view class="thumb">
                <u-image width="100%" height="788rpx" :src="data.content" mode="widthFix"></u-image>
            </view>
            <view class="play-bar">
                <u-image width="100%" height="84rpx" src="@/static/demo/play-bar.png" mode="widthFix"></u-image>
            </view>
        </view>
    </template>
</uce-flatlist>

文档

1. Props

2. Events

3.载入数据

this.$refs.flatlist.setListData(data)

提示！！此处注入的数据为渲染为”一页“的数据，数据量不宜太大，可以自己通过load来自己控制分页

genMockData() {
    let temp = [] let count = 3
    while (count--) {
        temp.push({
            idx: "1",
            content: yu_wen
        }) temp.push({
            idx: "2",
            content: shu_xue
        }) temp.push({
            idx: "3",
            content: ying_yu
        })
    }
    this.$refs.flatlist.setListData(temp)
},
//滚动触顶
handleTop() {},
//滚动触底
handleLoad() {
    this.genMockData()
},
// 页面数据初始化函数
init(options) {
    this.genMockData()
},

4.重置数据

this.$refs.flatlist.reset()