<template>
<div>
<list>
<cell>
<swiper :indicator-dots="true" :interval="3000" :duration="1000" @touchstart="clear" @change="changed" @animationfinish="animationFinish">
<swiper-item>
<view class="swiper-item">111</view>
</swiper-item>
<swiper-item>
<view class="swiper-item">222</view>
</swiper-item>
<swiper-item>
<view class="swiper-item">333</view>
</swiper-item>
<swiper-item>
<view class="swiper-item">444</view>
</swiper-item>
</swiper>
</cell>
<cell>
<view class="long">
<text class="text">{{msg}}</text>
<text class="text">{{msg1}}</text>
</view>
</cell>
</list>
</div>
</template>
<script>
export default {
data() {
return {
msg:'',
msg1:'',
startTime:''
}
},
onReady() {
},
methods: {
clear(){
this.msg='';
this.msg1='';
this.startTime=''
},
changed(e){
this.startTime = Date.now()
this.msg = '切换触发'
},
animationFinish(e){
let end = Date.now();
let interval = end - this.startTime
this.msg1='动画结束触发,间隔:'+interval+'毫秒'
}
}
}
</script>
<style>
.long{
width: 750rpx;
height: 2000rpx;
background-color: red;
}
.text{
color: #fff;
}
</style>
- 发布:2020-11-11 09:24
- 更新:2021-01-21 17:45
- 阅读:720
【报Bug】list中使用swiper,在list滚动后再触发swiper,不触发animationfinish(仅android)
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win7
HBuilderX类型: 正式
HBuilderX版本号: 2.9.7
手机系统: Android
手机系统版本号: Android 10
手机厂商: 三星
手机机型: note10+
页面类型: nvue
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
(以下都是swiper-item切换成功后的效果,即索引变化了的效果)
1.先正常切换swiper,效果为无论切换快慢,必触发change 然后是animationfinish
2.上下滚动list,效果为无论滚动快慢,有极大概率swiper失去过渡效果,只执行change,不执行animationfinish
(以下都是swiper-item切换成功后的效果,即索引变化了的效果)
1.先正常切换swiper,效果为无论切换快慢,必触发change 然后是animationfinish
2.上下滚动list,效果为无论滚动快慢,有极大概率swiper失去过渡效果,只执行change,不执行animationfinish
预期结果:
(以下都是swiper-item切换成功后的效果,即索引变化了的效果)
无论list如何滚动,swiper均触发change,animationfinish函数
(以下都是swiper-item切换成功后的效果,即索引变化了的效果)
无论list如何滚动,swiper均触发change,animationfinish函数
实际结果:
(以下都是swiper-item切换成功后的效果,即索引变化了的效果)
list滚动,swiper极大概率只触发change,不触发animationfinish(仅android)
(以下都是swiper-item切换成功后的效果,即索引变化了的效果)
list滚动,swiper极大概率只触发change,不触发animationfinish(仅android)
bug描述:
list中使用swiper,在list上下高速滚动或滚动未完全停止时,出现swiper滑动不触发animationfinish函数的情况,这个swiper没有过渡效果,只有android有这个问题,ios没有。
2 个回复
3***@qq.com (作者) - 问问服务
没有官方出来解决一下吗????
3***@qq.com (作者) - 问问服务
没有官方出来解决一下吗????