在vue项目中监听鼠标滚动事件（mousewheel）

在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: 防抖函数
通俗将就是鼠标滚轮不可能每次只滚动一个单位，有可能是一次滚动是好几个单位，这样走马灯出来后用户体验性不够友好。