vue里面怎么监听鼠标滚轮事件 滚动

//在mounted()方法里监听mousewheel;
// chrome and ie
window.addEventListener('mousewheel',this.handleScroll,false)
//// firefox
window.addEventListener"DOMMouseScroll",this.handleScroll,false)



export default {
       mounted (){
            this.imgHeight = document.documentElement.clientHeight || document.body.clientHeight;
            window.addEventListener('mousewheel',this.handleScroll,false)
        },
        data () {
            return {
                items:[
                    {
                        'url':require("./assets/pin_01.jpg"),
                    },
                    {
                        'url':require("./assets/pin_02.jpg"),
                    },
                    {
                        'url':require("./assets/pin_03.jpg"),
                    }
                ],
                isShow:true,
                nowIndex:0,
                imgHeight:""
            }
        },
         methods:{
            goto(index){
                this.isShow = false
                setTimeout(() => {
                    this.isShow = true
                    this.nowIndex = index
                }, 10)
            },
            handleScroll (e) {
              //var direction = e.deltaY>0?'down':'up' 该语句可以用来判断滚轮是向上滑动还是向下
              if(document.getElementsByTagName("li").length == 1){   //此处决定无论一次滚轮滚动的距离是多少,此事件                                                              
                                                           //都得等上次滚动结束,才会执行本次
                   this.isShow = false
                    setTimeout(() => {
                        this.isShow = true
                        ++ this.nowIndex
                        if(this.nowIndex == 3){
                        this.nowIndex = 0
                    }
                    }, 10)
                }
            }
             
           }
  }





你可能感兴趣的:(vue)