qjr
qjr
  • 发布:2024-11-20 17:49
  • 更新:2024-11-21 02:40
  • 阅读:39

【报Bug】nvue使用swiper 组件出现bug

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: window 11

HBuilderX类型: 正式

HBuilderX版本号: 4.32

手机系统: Android

手机系统版本号: Android 12

手机厂商: 三星

手机机型: S12

页面类型: nvue

vue版本: vue3

打包方式: 云端

项目创建方式: HBuilderX

示例代码:

<template>
<view>
<swiper @change="changeList" :vertical="true" style="height: 500rpx;">
<swiper-item v-for="(item,index) in showList" :key="index">
<view
style="background-color: aqua;width: 100%;height: 500rpx;align-items: center;justify-content: center;">
{{item.videoId}}
</view>
</swiper-item>
</swiper>
</view>
</template>

<script>
export default {
data() {
return {
showList: [{

                    "videoId": 2  
                },  
                {  

                    "videoId": 3  
                },  
                {  

                    "videoId": 4  
                }  
            ],  
            videoList: [{  

                    "videoId": 2  
                },  
                {  

                    "videoId": 3  
                },  
                {  

                    "videoId": 4  
                },  
                {  

                    "videoId": 5  
                },  
                {  

                    "videoId": 6  
                },  
                {  

                    "videoId": 7  
                },  
                {  

                    "videoId": 8  
                },  
                {  

                    "videoId": 9  
                },  
                {  

                    "videoId": 10  
                },  
                {  

                    "videoId": 11  
                },  
                {  
                    "videoId": 12  
                }  
            ],  
        }  
    },  
    methods: {  

        changeList(event) {  
            console.log(event);  
            const currentIndex = event.detail.current  
            console.log(currentIndex);  

            if (currentIndex == this.showList.length - 1) {  
                const nextId = this.showList[this.showList.length - 1].videoId + 1;  
                const nextItem = this.videoList.find(item => item.videoId == nextId);  
                if (nextItem) {  
                    this.showList.push(nextItem);  
                }  
            }  

        }  
    }  
}  

</script>

<style>

</style>

操作步骤:

下滑swiper,并更新showList

预期结果:

能够正常显示

实际结果:

不显示,需要手动触摸后显示

bug描述:

在nvue页面使用了swiper,设置了:vertical="true",在滑动的时候动态更新showList的数据会导致整个swiper不显示,如果我手轻微上下触摸就会出现;复现视频上传附件;

2024-11-20 17:49 负责人:无 分享
已邀请:
DCloud_heavensoft

DCloud_heavensoft

weex和nvue已经不维护了。追求原生体验可使用uvue,否则也可以使用vue的webview渲染。

  • qjr (作者)

    我看你们在4.31版本修复:App平台 修复 swiper-item个数动态减少后渲染和交互异常的Bug;这个会不会一样有影响?

    2024-11-21 09:13

要回复问题请先登录注册