vue监听鼠标滚动事件
<script>export default {name: "home",data(){return{currentId:1,listName: [] //滚动的列表}},methods:{//函数防抖debounce(func, wait) {
·
<script>
export default {
name: "home",
data(){
return{
currentId:1,
listName: [] //滚动的列表
}
},
methods:{
//函数防抖
debounce(func, wait) {
let timeout;
return function () {
let context = this;
let args = arguments;
if (timeout) clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(context, args)
}, wait);
}
},
//判断滚动方向
handleScroll(e){
let direction = e.deltaY > 0 ? 'down' : 'up'
if(this.currentId <= 1){
direction == 'down' ? this.currentId++ : this.currentId = 1
}else if(this.currentId>=this.listName.length){
direction == 'down' ? this.currentId = this.listName.length : this.currentId--
}else{
direction == 'down' ? this.currentId++ : this.currentId--
}
//业务操作
this.changeSel(this.currentId);
},
},
mounted () {
//监听鼠标滚动事件
window.addEventListener('mousewheel', this.debounce(this.handleScroll,300), true)||window.addEventListener("DOMMouseScroll",this.debounce(this.handleScroll,300),false)
},
}
</script>
更多推荐
已为社区贡献10条内容
所有评论(0)