淋透丶
淋透丶
  • 发布:2023-07-31 15:22
  • 更新:2023-07-31 16:36
  • 阅读:173

【报Bug】vue3工程,安卓app使用swiper容器,列表数据切换导致产生空白与指示点消失(Hello uniapp官方工程简单改造即可复现)

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 3.8.4

手机系统: Android

手机系统版本号: Android 11

手机厂商: 任意手机

手机机型: 任意

页面类型: vue

vue版本: vue2

打包方式: 云端

项目创建方式: 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">  
                <!-- 修改为v-for方式 begin -->  
                <swiper-item  
                    v-for="item in testList"  
                    :key="item.key">  
                    <image  
                        :src="item.img"  
                        mode="scaleToFill"></image>  
                </swiper-item>  
                <!-- 修改为v-for方式 end -->  
            </swiper>  
        </view>  

        <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>  
            <button @click="changeList">  
                切换列表数据  
            </button>  
        </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>  
    // 添加几张图片-来源于uniapp官网的几个icon -begin  
    const picA = 'https://web-assets.dcloud.net.cn/unidoc/zh/uniCloud.png'  
    const picB = 'https://web-assets.dcloud.net.cn/unidoc/zh/uni.png'  
    const picC = 'https://web-assets.dcloud.net.cn/unidoc/zh/hx.png'  
    // 添加几张图片-来源于uniapp官网的几个icon -end  
    export default {  
        data() {  
            return {  
                background: ['color1', 'color2', 'color3'],  
                indicatorDots: true,  
                autoplay: true,  
                interval: 2000,  
                duration: 500,  
                // 添加一个测试列表数组和一个状态-begin  
                testList: [{  
                    img: picA,  
                    key: 'a'  
                }, {  
                    img: picB,  
                    key: 'b'  
                }, {  
                    img: picC,  
                    key: 'c'  
                }],  
                listStatus: true,  
                // 添加一个测试列表数组和一个状态-end  
            }  
        },  
        methods: {  
            // 切换列表数据-begin  
            changeList() {  
                this.listStatus = !this.listStatus  
                this.testList = this.listStatus ? [{  
                    img: picA,  
                    key: 'a'  
                }, {  
                    img: picB,  
                    key: 'b'  
                }, {  
                    img: picC,  
                    key: 'c'  
                }] : [{  
                    img: picA,  
                    key: 'a'  
                }, {  
                    img: picB,  
                    key: 'b'  
                }]  
            },  
            // 切换列表数据-end  
            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  
            }  
        }  
    }  
</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>

操作步骤:

1.使用HbuilderX,新建一个Hello uniapp模板的vue3版本的工程
2.找到目录pages-swiper-swiper.vue文件,可以全选代码示例直接覆盖,也可以复制几段注释中间的代码进行测试
3.运行到Android app基座
4.打开app,内置组件-视图容器-swiper
5.触摸容器内的图片,正常滑动
6.点击 切换列表数据 按钮,此时指示点已经消失了
7.再次触摸swiper容器内的图片滑动,图片往右滑动,容器内变空白,然后再也无法滑动了

预期结果:

swiper容器内,正常滑动,且指示点不会突然消失

实际结果:

swiper容器内出现空白,无法滑动,指示点消失

bug描述:

【报Bug】进一步明确bug,vue3项目,安卓app使用swiper容器,swiper-item使用v-for渲染,当列表数据切换后,会导致容器内产生空白与指示点消失,使用uniapp 官方工程Hello uniapp vue3版本简单改造50行不到代码即可复现.附件是真机录屏。

2023-07-31 15:22 负责人:无 分享
已邀请:
喜欢技术的前端

喜欢技术的前端 - QQ---445849201

你好,刚试过,没有复现,传了附件你可以跑一下,如果还有问题可以再讨论

  • 淋透丶 (作者)

    感谢测试,下载了你的Demo,进一步定位了bug,vue2版本确实没这问题,是在vue3版本的工程中才会有这个问题。

    2023-07-31 16:55

要回复问题请先登录注册