今天在用Animate.css动画做交互的时候,遇到了一些问题。
理想效果为:
而用户短时间内可能会滚动多次
实际效果:
在网上找了各种防抖函数,并没有实现效果。不得已看来只能自己写了
逻辑是触发方法后解绑方法 ,到达指定时间后再重新给方法赋值
简约版代码如下:
<script>
export default {
name: 'anim02',
data() {
return {
flag: 0,
isNext: true,
}
},
methods: {
//滚动方法
scrolling(e) { //标签@wheel="scrolling($event)
console.log('我在节流之前还能操作一小会')
//理想版本
this.untieFuc(this.move(), 1000)
},
//滚动具体实现
move(){
console.log('1000毫秒内我只会