uni-app nvue中list组件少渲染数据

uni-app nvue中list组件少渲染数据

示例代码：

<!-- 普通模式演示(nvue) -->  
<template>  
    <view class="content">  
        <list :style="{ height: height, background: '#000000' }" @loadmore="queryList(pageNum+1,5)"  
            :pagingEnabled="true">  
            <cell :style="videoStyle" class="item" v-for="(item,index) in dataList" :key="item.title"  
                @disappear="Disappear(item)" @click="itemClick(item)">  
                <video v-if="item.videoId" :poster="item.cover"  
                    src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-2908110e-6da2-4899-8b44-d45c153457ad/ec383f81-6896-4274-8861-e329ae1376b4.mp4"></video>  
                <image v-else :style="videoStyle" :src="item.cover"></image>  
                <view class="content_ment" @appear="Appear(item)">  
                    {{index}}  
                </view>  
            </cell>  
        </list>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                dataList: [],  
                height: 0,  
                sHeight: 0,  
                videoStyle: {  
                    height: 0,  
                    width: "750rpx",  
                },  
                videoPlayId: "",  
                nextId: "",  
                exitId: "",  
                currentId: "",  
                pageNum: 1,  
            }  
        },  
        watch: {  
            currentId(val) {  
                if (this.dataList.length > 3) {  
                    if (val === this.dataList[this.dataList.length - 3].id) {  
                        this.$nextTick(() => {  
                            this.queryList(this.pageNum+1, 5);  
                        });  
                    }  
                }  
            },  
        },  
        onLoad() {  
            this.height = uni.getSystemInfoSync().windowHeight;  
            this.sHeight = uni.getSystemInfoSync().statusBarHeight;  
            this.videoStyle.height = this.height;  
            this.queryList(this.pageNum, 5);  
        },  
        methods: {  
            getData(params) {  
                return new Promise((resolve, reject) => {  
                    uni.request({  
                        url: '数据地址',  
                        method: 'POST',  
                        data: params,  
                        success: (res) => {  
                            resolve(res.data.data);  
                        },  
                        fail() {  
                            reject(undefined)  
                        }  
                    })  
                })  
            },  
            async queryList(pageNo, pageSize) {  
                this.pageNum = pageNo;  
                const params = {  
                    pageNum: pageNo,  
                    pageSize: pageSize,  
                }  
                const res = await this.getData(params);  
                this.dataList = this.dataList.concat(res.list)  
            },  
            Appear(data) {  
                this.nextId = data.id;  
            },  
            Disappear(data) {  
                this.exitId = data.id;  
                if (this.exitId !== this.nextId) {  
                    this.currentId = this.nextId;  
                    this.videoPlayId = this.dataList.filter(  
                        (item) => item.id === this.nextId,  
                    )[0].id;  
                }  
            },  
            itemClick(item) {  
                console.log('点击了', item.title);  
            }  
        }  
    }  
</script>  

<style>  
    .item {  
        flex-direction: row;  
        position: relative;  
        align-items: center;  
        justify-content: space-between;  
        border: 1prx solid red;  
        position: relative;  
    }  

    .item-detail {  
        padding: 5rpx 15rpx;  
        border-radius: 10rpx;  
        font-size: 28rpx;  
        color: white;  
        background-color: #007AFF;  
    }  

    .item-line {  
        position: absolute;  
        bottom: 0;  
        left: 0;  
        right: 0;  
        height: 1px;  
        background-color: #eeeeee;  
    }  

    .content_ment {  
        position: absolute;  
        right: 26rpx;  
        bottom: 632rpx;  
        width: 100rpx;  
        height: 100rpx;  
        background-color: #007AFF;  
    }  

    .home-video-player-container {  
        width: 750rpx;  
    }  
</style>

操作步骤：

分页获取数据，最好是每页几条数据（数据类型中含有视频和图片）
在列表中根据类型渲染出数据即可

预期结果：

数据正常显示

实际结果：

数据少渲染，导致页面卡中间

bug描述：

代码大概是这样，刷着刷着就少渲染一条数据，就会卡在页面中间