<template>
<view>
<view class="banner">
<view class="swiper_content">
<swiper circular :autoplay="true" @transition="itemChange" :duration="1000" @change="swiperChange">
<swiper-item v-for="(item, index) in banner_data" :key="index">
<image :src="item" />
</swiper-item>
</swiper>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
banner_data: [
{
url: '../../static/index/swiper_bg.png'
}, {
url: '../../static/index/swiper_bg2.png'
}, {
url: '../../static/index/swiper_bg3.png'
}, {
url: '../../static/index/swiper_bg4.png'
}, {
url: '../../static/index/swiper_bg5.png'
}
]
}
},
methods: {
change(e){},
itemChange(e) {
let data = parseInt(e.detail.dx);
console.log(data)
},
animationfinish({ detail: { current } }){}
}
}
</script>
<style lang="scss">
.banner {
width: 750upx;
height: 720upx;
overflow: hidden;
.swiper_content {
width: 750upx;
height: 720upx;
swiper {
width: 750upx;
height: 720upx;
image {
width: 750upx;
height: 720upx;
}
}
}
.swiper_dot_content {
display: flex;
flex-direction: row;
justify-content: center;
position: relative;
bottom: 20upx;
.swiper_dot {
width: 8upx;
height: 4upx;
background: #FFFFFF;
border-radius: 2upx;
margin: 4upx;
}
.swiper_dot.current {
background: #0BB908;
width: 16upx;
}
}
}
</style>
1***@qq.com
- 发布：2022-02-23 16:06
- 更新：2022-02-24 13:16
- 阅读：575
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： 10
HBuilderX类型： 正式
HBuilderX版本号： 3.2.16
手机系统： Android
手机系统版本号： Android 10
手机厂商： vivo
手机机型： 一加7
页面类型： vue
vue版本： vue2
打包方式： 离线
项目创建方式： HBuilderX
示例代码：
操作步骤：
itemChange(e) {
let data = parseInt(e.detail.dx);
console.log(data)
},
itemChange(e) {
let data = parseInt(e.detail.dx);
console.log(data)
},
预期结果：
每一次滚动的值应该一样
每一次滚动的值应该一样
实际结果：
只有前面的滚动值一致，最后一项滚动回第一项时，dx的值小不一致。
只有前面的滚动值一致，最后一项滚动回第一项时，dx的值小不一致。
bug描述：
swiper组件当最后一项swiper-item，滑动回第一个swiper-item时，@transition监听到的dx数值，跟第一项滑动到第二项、第二项滑动到第三项、第三项滑动到第四项.....的数值不一致。swiper的宽高皆为定值，图片的宽高也为定值，在页面位置也为定制，没有使用任何元素定位。
1***@qq.com (作者)
升级为最新版本还是一样，swiper的@transition监听到最后一项滑动回第一项时，dx的数值与前面的不一致。
2022-02-24 09:44