z***@163.com
z***@163.com
  • 发布:2024-09-26 14:46
  • 更新:2024-09-26 22:37
  • 阅读:115

【报Bug】swiper 在vue3中 动态更新数据小于老数据 触碰、滑动、点击导致空白

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 4.28

手机系统: Android

手机系统版本号: Android 11

手机厂商: 华为

手机机型:

页面类型: vue

vue版本: vue3

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<template>  
    <view>  
        <page-head title="swiper,可滑动视图"></page-head>  
        <view class="uni-margin-wrap">  
            <swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">  
                <swiper-item v-for="(item,index) in background" :key="index">  
                    <view style="display: block;  
        height: 300rpx;  
        line-height: 300rpx;  
        text-align: center;" :class="item">{{index}}</view>  
                </swiper-item>  
            </swiper>  
        </view>  
        <button @click="click(1)">切换1个数据</button>  
        <button @click="click(2)">切换2个数据</button>  
        <button @click="click(3)">切换3个数据</button>  
        <button @click="click(4)">切换4个数据</button>  
        <view class="swiper-list">  
            <view class="uni-list-cell uni-list-cell-pd">  
                <view class="uni-list-cell-db">指示点</view>  
                <switch :checked="indicatorDots" @change="changeIndicatorDots" />  
            </view>  
            <view class="uni-list-cell uni-list-cell-pd">  
                <view class="uni-list-cell-db">自动播放</view>  
                <switch :checked="autoplay" @change="changeAutoplay" />  
            </view>  
        </view>  

        <view class="uni-padding-wrap">  
            <view class="uni-common-mt">  
                <text>幻灯片切换时长(ms)</text>  
                <text class="info">{{duration}}</text>  
            </view>  
            <slider @change="durationChange" :value="duration" min="500" max="2000" />  
            <view class="uni-common-mt">  
                <text>自动播放间隔时长(ms)</text>  
                <text class="info">{{interval}}</text>  
            </view>  
            <slider @change="intervalChange" :value="interval" min="2000" max="10000" />  
        </view>  
    </view>  
</template>  
<script>  
    export default {  
        data() {  
            return {  
                background: ['uni-bg-red', 'uni-bg-green', 'uni-bg-blue'],  
                indicatorDots: true,  
                autoplay: true,  
                interval: 2000,  
                duration: 500  
            }  
        },  
        methods: {  
            changeIndicatorDots(e) {  
                this.indicatorDots = !this.indicatorDots  
            },  
            changeAutoplay(e) {  
                this.autoplay = !this.autoplay  
            },  
            intervalChange(e) {  
                this.interval = e.detail.value  
            },  
            durationChange(e) {  
                this.duration = e.detail.value  
            },  
            click(e){  
                let backgroundList=[]  
                let index = 0;  
                while (index < e) {  
                    backgroundList.push('uni-bg-red')  
                    index++  
                }  

                this.background=backgroundList  
            }  
        }  
    }  
</script>  

<style>  
    .uni-margin-wrap {  
        width:690rpx;  
        width: 100%;;  
    }  
    .swiper {  
        height: 300rpx;  
    }  
    .swiper-item {  
        display: block;  
        height: 300rpx;  
        line-height: 300rpx;  
        text-align: center;  
    }  

    .swiper-list {  
        margin-top: 40rpx;  
        margin-bottom: 0;  
    }  

    .uni-common-mt{  
        margin-top:60rpx;  
        position:relative;  
    }  

    .info {  
        position: absolute;  
        right:20rpx;  
    }  

    .uni-padding-wrap {  
        width:550rpx;  
        padding:0 100rpx;  
    }  
</style>

操作步骤:

如下列代码background有三个数据,点击切换1个数据和切换2个数据会出现此bug

预期结果:

正常显示

实际结果:

点击触碰就会空白

bug描述:

【报Bug】swiper 在vue3中 动态更新数据小于老数据 触碰、滑动、点击导致空白
h5运行没有问题
安卓和ios 打包,自定义基座,标准基座都有出现
如下列代码background有三个数据,点击切换1个数据和切换2个数据会出现此bug

2024-09-26 14:46 负责人:无 分享
已邀请:
1***@qq.com

1***@qq.com

兄弟我也遇到和你差不多相似的问题 有解决方案了嘛?

  • z***@163.com (作者)

    看业务逻辑吧 我在change和onAnimationfinish里判断 return暂时解决了

    2024-09-27 09:56

要回复问题请先登录注册