3***@qq.com
3***@qq.com
  • 发布:2020-11-11 09:24
  • 更新:2021-01-21 17:45
  • 阅读:720

【报Bug】list中使用swiper,在list滚动后再触发swiper,不触发animationfinish(仅android)

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win7

HBuilderX类型: 正式

HBuilderX版本号: 2.9.7

手机系统: Android

手机系统版本号: Android 10

手机厂商: 三星

手机机型: note10+

页面类型: nvue

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<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>  

操作步骤:

(以下都是swiper-item切换成功后的效果,即索引变化了的效果)
1.先正常切换swiper,效果为无论切换快慢,必触发change 然后是animationfinish
2.上下滚动list,效果为无论滚动快慢,有极大概率swiper失去过渡效果,只执行change,不执行animationfinish

预期结果:

(以下都是swiper-item切换成功后的效果,即索引变化了的效果)
无论list如何滚动,swiper均触发change,animationfinish函数

实际结果:

(以下都是swiper-item切换成功后的效果,即索引变化了的效果)
list滚动,swiper极大概率只触发change,不触发animationfinish(仅android)

bug描述:

list中使用swiper,在list上下高速滚动或滚动未完全停止时,出现swiper滑动不触发animationfinish函数的情况,这个swiper没有过渡效果,只有android有这个问题,ios没有。

2020-11-11 09:24 负责人:DCloud_Android_zl 分享
已邀请:
3***@qq.com

3***@qq.com (作者) - 问问服务

没有官方出来解决一下吗????

3***@qq.com

3***@qq.com (作者) - 问问服务

没有官方出来解决一下吗????

该问题目前已经被锁定, 无法添加新回复