vue项目中监听鼠标滚轮事件

描述

通过鼠标向下滚动或者向上滚动做相应的事件

代码

<div class="container-box" @wheel="handleWheel"></div>
 
 //节流函数
 throttle (fn, gapTime) {
      let _this = this
      return function () {
        let _nowTime = +new Date()
        if (_nowTime - _this._lastTime > gapTime || !_this._lastTime) {
          fn(...arguments)// 函数可以带参数
          _this._lastTime = _nowTime
        }
      }
    },
    handleWheel (e) {
      e.stopPropagation()
      this.throttle(this.pageUpOrDown, 600)(e)
    },
    pageUpOrDown (e) {
      if (e.deltaY > 0) {
        //向下
        this.clickNext()//执行的事件逻辑。比如向下翻页
      } else if (e.deltaY < 0) {
        //向上
        this.clickPrev()//比如向上翻页
      }
    },