<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>
- 发布:2023-07-31 15:22
- 更新:2024-09-11 17:28
- 阅读:415
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: Win10
HBuilderX类型: 正式
HBuilderX版本号: 3.8.4
手机系统: Android
手机系统版本号: Android 11
手机厂商: 任意手机
手机机型: 任意
页面类型: vue
vue版本: vue2
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
1.使用HbuilderX,新建一个Hello uniapp模板的vue3版本的工程
2.找到目录pages-swiper-swiper.vue文件,可以全选代码示例直接覆盖,也可以复制几段注释中间的代码进行测试
3.运行到Android app基座
4.打开app,内置组件-视图容器-swiper
5.触摸容器内的图片,正常滑动
6.点击 切换列表数据 按钮,此时指示点已经消失了
7.再次触摸swiper容器内的图片滑动,图片往右滑动,容器内变空白,然后再也无法滑动了
1.使用HbuilderX,新建一个Hello uniapp模板的vue3版本的工程
2.找到目录pages-swiper-swiper.vue文件,可以全选代码示例直接覆盖,也可以复制几段注释中间的代码进行测试
3.运行到Android app基座
4.打开app,内置组件-视图容器-swiper
5.触摸容器内的图片,正常滑动
6.点击 切换列表数据 按钮,此时指示点已经消失了
7.再次触摸swiper容器内的图片滑动,图片往右滑动,容器内变空白,然后再也无法滑动了
预期结果:
swiper容器内,正常滑动,且指示点不会突然消失
swiper容器内,正常滑动,且指示点不会突然消失
实际结果:
swiper容器内出现空白,无法滑动,指示点消失
swiper容器内出现空白,无法滑动,指示点消失
bug描述:
【报Bug】进一步明确bug,vue3项目,安卓app使用swiper容器,swiper-item使用v-for渲染,当列表数据切换后,会导致容器内产生空白与指示点消失,使用uniapp 官方工程Hello uniapp vue3版本简单改造50行不到代码即可复现.附件是真机录屏。
淋透丶 (作者)
感谢测试,下载了你的Demo,进一步定位了bug,vue2版本确实没这问题,是在vue3版本的工程中才会有这个问题。
2023-07-31 16:55
4***@qq.com
请问官方,这个问题还没解决吗?同样情况出现问题
2024-05-17 22:28