<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>
- 发布:2020-06-05 14:45
- 更新:2022-01-28 17:28
- 阅读:3131
产品分类: uniapp/App
PC开发环境操作系统: Mac
PC开发环境操作系统版本号: 10.15.2
HBuilderX类型: 正式
HBuilderX版本号: 2.7.9
手机系统: iOS
手机系统版本号: iOS 13.4
手机厂商: 苹果
手机机型: iphone8
页面类型: nvue
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
使用 @tap.stop="ontap" @touchstart.stop="touchstart" 在动画执行期间点击均没有得到响应,在动画停止的时候得到了响应。
使用 @tap.stop="ontap" @touchstart.stop="touchstart" 在动画执行期间点击均没有得到响应,在动画停止的时候得到了响应。
预期结果:
在动画执行期间也能得到响应
在动画执行期间也能得到响应
实际结果:
没有得到响应
没有得到响应
bug描述:
在nvue页面中使用animation动画模块,在动画执行期间点击事件没有得到响应。 Android正常,iOS没有响应到。
6 个回复
最佳回复
DCloud_iOS_XHY
感谢反馈,此问题已经在 HBuilderX 3.1.0+版本修复,请升级;
3***@qq.com
铁子,问题解决了吗?
w***@126.com (作者)
木有啊
2021-01-08 17:28
DCloud_UNI_Anne
请提供简单、可稳定复现、能直接运行的完整示例(上传附件),方便我们快速排查问题哦。
【正确报bug的姿势】https://ask.dcloud.net.cn/article/38139
w***@126.com (作者)
感谢回复,示例代码在最新的回复中。
2021-01-08 17:39
w***@126.com (作者) - 前端小白菜
iOS在动画开始飘动的时候去点击飘动的元素没有反应,如果此时点击元素边缘区域可能会有反应,有了第一次反应后,后面的点击反应也会时常有时常没有,没有像安卓那样子不论何时点击都有反应。
示例项目见附件,谢谢。
DCloud_UNI_Anne
问题已验证,已加分,感谢您的反馈!
2021-01-09 20:40
DCloud_iOS_XHY
问题已修复,此问题会在下次发版解决
7***@qq.com
请问你能在v-for中使用动画吗