<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>
- 发布:2024-09-26 14:46
- 更新:2024-09-26 22:37
- 阅读:115
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win10
HBuilderX类型: 正式
HBuilderX版本号: 4.28
手机系统: Android
手机系统版本号: Android 11
手机厂商: 华为
手机机型: 无
页面类型: vue
vue版本: vue3
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
如下列代码background有三个数据,点击切换1个数据和切换2个数据会出现此bug
如下列代码background有三个数据,点击切换1个数据和切换2个数据会出现此bug
预期结果:
正常显示
正常显示
实际结果:
点击触碰就会空白
点击触碰就会空白
bug描述:
【报Bug】swiper 在vue3中 动态更新数据小于老数据 触碰、滑动、点击导致空白
h5运行没有问题
安卓和ios 打包,自定义基座,标准基座都有出现
如下列代码background有三个数据,点击切换1个数据和切换2个数据会出现此bug
z***@163.com (作者)
看业务逻辑吧 我在change和onAnimationfinish里判断 return暂时解决了
2024-09-27 09:56