4***@qq.com
4***@qq.com
  • 发布:2024-05-18 01:05
  • 更新:2024-05-18 01:05
  • 阅读:199

【报Bug】swiper组件在数据比上次少的情况下出现白屏

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: 企业版22H2

HBuilderX类型: 正式

HBuilderX版本号: 4.17

手机系统: Android

手机系统版本号: Android 12

手机厂商: 华为

手机机型: EML-TL00

页面类型: vue

vue版本: vue3

打包方式: 云端

项目创建方式: HBuilderX

App下载地址或H5⽹址: https://www.pgyer.com/manager/dashboard/app/44ac7fccd18db9f5f785bec2f8aa12a5

示例代码:
<template> <view class="tui-banner-bg" :style="{marginBottom:height}"> <!--banner--> <view class="tui-banner-box" :style="{background: background, padding:padding}"> <swiper :indicator-dots="true" :autoplay="true" :interval="5000" :duration="150" class="tui-banner-swiper" style="{height:height,borderRadius:borderRadius,boxShadow: shadow && '0 0 20rpx #333'}" circular="true" indicator-color="rgba(255, 255, 255, 0.8)" indicator-active-color="#fff"> <swiper-item v-for="(item, index) in data" :key="index" @tap.stop="$go">
<image :src="item" class="tui-slide-image" :style="{height:height}" mode="scaleToFill" />
</swiper-item>
</swiper>
</view>
</view>
</template>

<script>
export default {
name: "my-banner",
props:{
data: {
type: Array,
default: function() {
return []
}
},
background: {
type: String,
default:'linear-gradient(to bottom,#950015, #faf6f5)'
},
padding: {
type: String,
default:'0 20rpx'
},
height: {
type: String,
default:'240rpx'
},
borderRadius: {
type: String,
default:'10rpx'
},
shadow: {
type: Boolean,
default:false
}
},
data() {
return {

        };  
    },  
    created() {  
  // console.log(this.data)  
    },  
    methods: {  
  // 进入详情页  
  $go(){  
    /* uni.navigateTo({  
        url: '/pages/home/lawyer'  
    }); */  
  },  
    }  
}  

</script>

操作步骤:

数组data在减少时便会发生白屏现象(示例app可以参考首页右上角切换地址--江苏和浙江两个区域复现)

预期结果:

数组data在比上次数据少时正常显示

实际结果:

数组(data.length 3)在比上次数据数组(data.length 2)少时swiper组件自动定位止新数据的第一屏(data[0] 2),指示点消失,手动切换将整体出现白色空图片,数据(data.length 3及以上)再次赋值,正常显示

bug描述:

2024-05-18 01:05 负责人:无 分享
已邀请:

要回复问题请先登录注册