在vue项目中监听鼠标滚动事件(mousewheel)
在vue项目中使用elementui做一个竖屏走马灯效果,carousel组件有点击事件,并没有明确的鼠标滚轮事件,希望做一个鼠标前后滚动也可以切换走马灯,当没有滚动跳出现时,通过监听scroll将无作用。1、走马灯的上下页点击切换setActiveItem(index) {//index为走马灯当前页码let nextIndex = index ++;this.$refs.carousel.se
·
在vue项目中使用elementui做一个竖屏走马灯效果,carousel组件有点击事件,并没有明确的鼠标滚轮事件,希望做一个鼠标前后滚动也可以切换走马灯,当没有滚动跳出现时,通过监听scroll将无作用。
1、走马灯的上下页点击
切换
setActiveItem(index) { //index为走马灯当前页码
let nextIndex = index ++;
this.$refs.carousel.setActiveItem(nextIndex)
},
2、走马灯的上下页鼠标滚轮
切换
a、鼠标滚轮监听事件
mounted(){
//监听鼠标滚动事件
window.addEventListener('mousewheel',this.handleScroll);
},
b、滚动函数
//判断滚动方向,因为此demo中只有四页,故边界处理为 0 与 3
handleScroll(e){
//e.wheelDellta:可以用来获取鼠标的滚动方向,对于得到的值,只看正负,往上滚是正值,往下滚是负值。
//火狐浏览器不支持这个方法,需要会用e.detail来获取滚轮的滚动方向,向上是负值,向下是正值
let direction = e.deltaY > 0 ? 'down':'up'; //deltaY为正则滚轮向下,为负滚轮向上
//125为用户一次滚动鼠标的wheelDelta的值,125与鼠标滚动一下是几行的不同而不同
if(direction=='down' && e.deltaY >= 125){
if(this.initialIndex >= 3){
this.initialIndex = 3
}else{
this.initialIndex += 1;
this.setActiveItem(this.initialIndex)
}
}
if(direction=='up' && e.deltaY <= -125){
if(this.initialIndex <= 0){
this.initialIndex = 0;
// this.setActiveItem(0)
}else{
this.initialIndex -= 1;
this.setActiveItem(this.initialIndex)
}
}
},
c、debounce: 防抖函数
通俗将就是鼠标滚轮不可能每次只滚动一个单位,有可能是一次滚动是好几个单位,这样走马灯出来后用户体验性不够友好。
更多推荐
已为社区贡献1条内容
所有评论(0)