w***@126.com
w***@126.com
  • 发布:2020-06-05 14:45
  • 更新:2022-01-28 17:28
  • 阅读:3131

【报Bug】使用nvue的animation内置模块,在动画执行期间点击事件没有响应,iOS

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Mac

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

HBuilderX类型: 正式

HBuilderX版本号: 2.7.9

手机系统: iOS

手机系统版本号: iOS 13.4

手机厂商: 苹果

手机机型: iphone8

页面类型: nvue

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<template>  
    <view class="u-danmu-content" :id="'danmu'+n" :ref="'__ref_danmu'+n" :style="styleStr" @tap.stop="ontap" @touchstart.stop="touchstart">  
        <slot></slot>  
    </view>  
</template>  
<script>  
    const dom = weex.requireModule('dom');  

    export default {  
        props: {  
            // 水平滚动时的滚动速度,即每秒滚动多少rpx,这有利于控制文字无论多少时,都能有一个恒定的速度  
            speed: {  
                type: [Number, String],  
                default: 300  
            },  
            // 播放状态,play-播放,paused-暂停  
            playState: {  
                type: String,  
                default: 'play'  
            },  
            windowHeight: {  
                type: Number,  
                default: 300  
            },  
            n: {  
                type: Number,  
                default: 0  
            },  
        },  
        data() {  
            return {  
                top: 120,  
                textWidth: 0, // 滚动的文字宽度  
                boxWidth: 0, // 供文字滚动的父盒子的宽度,和前者一起为了计算滚动速度  
                transitionDuration: 5, // 动画执行时间  
                // animationPlayState: 'paused', // 动画的开始和结束执行  
                isMove: false,  
                windowWidth: uni.upx2px(750)  
            };  
        },  
        watch: {  
            playState(val) {  
                if (val == 'play') this.animationPlayState = 'running';  
                else this.animationPlayState = 'paused';  
            },  
            speed(val) {  
                this.initSize();  
            }  
        },  
        computed: {  
            styleStr() {  
                return 'top:' + this.top + 'px';  
            }  
        },  
        mounted() {  
            this.$nextTick(() => {  
                this.initSize();  
            });  
        },  
        methods: {  
            move() {  
                this.isMove = !this.isMove;  
            },  
            ontap(event){  
                console.log('ontapevent', event)  
            },  
            touchstart(event){  
                console.log('touchstartevent', event)  
            },  
            /* 动画执行 */  
            animate(width) {  
                const animation = weex.requireModule('animation');  
                // console.log('animate width', width)  
                animation.transition(this.$refs['__ref_danmu' + this.n], {  
                    styles: {  
                        transform: `translateX(-10%)`  
                    },  
                    duration: this.transitionDuration,  
                    timingFunction: 'linear',  
                    delay: 0  
                }, () => {  
                    // animation.transition(this.$refs['__ref_danmu' + this.n], {  
                    //  styles: {  
                    //      transform: `translateX(${this.windowWidth}px)`  
                    //  },  
                    //  duration: 0,  
                    //  timingFunction: 'linear',  
                    //  delay: 0  
                    // }, () => {  
                    //  this.animate(width)  
                    // })  
                })  
            },  
            initSize() {  
                let query = [],  
                    boxWidth = 0,  
                    textWidth = 0;  
                let textQuery = new Promise((resolve, reject) => {  
                    uni.createSelectorQuery()  
                        .in(this)  
                        .select(`#danmu${this.n}`)  
                        .boundingClientRect()  
                        .exec(ret => {  
                            this.textWidth = ret[0].width;  
                            resolve();  
                        });  
                });  
                query.push(textQuery);  
                Promise.all(query).then(() => {  
                    // 根据t=s/v(时间=路程/速度)  
                    this.transitionDuration = (this.textWidth + this.windowWidth) / uni.upx2px(this.speed) * 1000;  
                    this.top = Math.random() * this.windowHeight + uni.upx2px(100);  
                    // console.log('transitionDuration速度和top', this.transitionDuration,this.top);  
                    this.$nextTick(() => {  
                        this.animate(this.textWidth)  
                    })  
                });  
            },  
        }  
    };  
</script>  

<style lang="scss" scoped>  
    .u-danmu-content {  
        position: fixed;  
        top: 200rpx;  
        transform: translateX(750rpx);  
    }  
</style>  

操作步骤:

使用 @tap.stop="ontap" @touchstart.stop="touchstart" 在动画执行期间点击均没有得到响应,在动画停止的时候得到了响应。

预期结果:

在动画执行期间也能得到响应

实际结果:

没有得到响应

bug描述:

在nvue页面中使用animation动画模块,在动画执行期间点击事件没有得到响应。 Android正常,iOS没有响应到。

2020-06-05 14:45 负责人:DCloud_iOS_XHY 分享
已邀请:

最佳回复

DCloud_iOS_XHY

DCloud_iOS_XHY

感谢反馈,此问题已经在 HBuilderX 3.1.0+版本修复,请升级;

3***@qq.com

3***@qq.com

铁子,问题解决了吗?

DCloud_UNI_Anne

DCloud_UNI_Anne

  • w***@126.com (作者)

    感谢回复,示例代码在最新的回复中。

    2021-01-08 17:39

w***@126.com

w***@126.com (作者) - 前端小白菜

iOS在动画开始飘动的时候去点击飘动的元素没有反应,如果此时点击元素边缘区域可能会有反应,有了第一次反应后,后面的点击反应也会时常有时常没有,没有像安卓那样子不论何时点击都有反应。

示例项目见附件,谢谢。

  • DCloud_UNI_Anne

    问题已验证,已加分,感谢您的反馈!

    2021-01-09 20:40

DCloud_iOS_XHY

DCloud_iOS_XHY

问题已修复,此问题会在下次发版解决

7***@qq.com

7***@qq.com

请问你能在v-for中使用动画吗

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