不知道呀
不知道呀
  • 发布:2024-05-28 12:00
  • 更新:2024-06-11 15:55
  • 阅读:225

【报Bug】nvue中list组件少渲染数据

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: Windows 10 专业版

HBuilderX类型: 正式

HBuilderX版本号: 4.14

手机系统: Android

手机系统版本号: Android 13

手机厂商: 小米

手机机型: redmiK50至尊版

页面类型: vue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<!-- 普通模式演示(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 {  
                // v-model绑定的这个变量不要在分页请求结束中自己赋值!!!  
                dataList: [],  
                height: 0,  
                sHeight: 0,  
                videoStyle: {  
                    height: 0,  
                    width: "750rpx",  
                },  
                // 当前播放视频id  
                videoPlayId: "",  
                // 下一个视频id  
                nextId: "",  
                // 退出页面的视频id  
                exitId: "",  
                // 当前id  
                currentId: "",  
                pageNum: 1,  
            }  
        },  
        watch: {  
            currentId(val) {  
                if (this.dataList.length > 3) {  
                    if (val === this.dataList[this.dataList.length - 3].id) {  
                        this.$nextTick(() => {  
                            // this.$refs.paging && this.$refs.paging.doLoadMore();  
                            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) => {  
                            // let List = res.data;  
                            // var msg = res.data.data;  
                            // let List = JSON.parse( JSON.stringify(this.dataList) );  
                            // for (let i = 0; i < msg.length; i++) {  
                            //  List.push(msg[i])  
                            // }  
                            // this.dataList = List;  
                            resolve(res.data.data);  

                        },  
                        fail() {  
                            reject(undefined)  
                        }  
                    })  
                })  
            },  
            async queryList(pageNo, pageSize) {  
                this.pageNum = pageNo;  
                const params = {  
                    pageNum: pageNo,  
                    pageSize: pageSize,  
                }  
                console.log("=====params", params)  
                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描述:

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

2024-05-28 12:00 负责人:DCloud_Android_ST 分享
已邀请:
帅先突破

帅先突破

顶,希望官方解决

不知道呀

不知道呀 (作者)

我也顶一顶

不知道呀

不知道呀 (作者)

看看呢

要回复问题请先登录注册