滑鼠滾輪控制頁面上下滑動

問題

1. 開發專案初始定位為面向移動端，現在經理要求在PC端能夠正常使用
2. 專案基於VUE框架，主使用的VUX元件庫，使用的VUX分頁載入元件
3. 移動端上下滑動沒問題，PC端使用滑鼠拖動沒問題，但是滾輪滑動無法觸發元件的上下滑動，估計是因為VUX是移動端元件的原因
4. 需求希望能夠使用滾輪滑動來控制滑動及分頁，能夠優化使用者體驗。
5. 僅僅控制頁面中的列表分頁部分，頁面中的頂部欄與底部欄是不動的。

解決方案

查閱到有個window.onmousewheel事件控制代碼。現成的滾輪滑動監控功能。
同時，該事件控制代碼同時也可以用來實現滾輪滑動的其它事件。

• 事件控制代碼功能閉環。新增事件控制代碼事件。移除事件控制代碼事件。

mounted () {
// 新增事件控制代碼，內部通過賦值操作為事件控制代碼新增事件。
  this.onmousewheelEvent()
},
destroyed () {
  // 移除事件控制代碼
  window.onmousewheel = null
}

PS：事件控制代碼事件新增後需要注意移除，否則容易導致控制檯報錯等情況。
PS：此次是使用VUE例項的mounted 和destroyed 。也可以使用VUE的路由守衛來實現。

• 滾輪滑動觸發事件

思路：

1. 先獲取分頁滑動元件。此處是使用ClassName獲取DOM。主要是為了獲取其中的transform屬性，通過使用元件自身提供的方法更改transform中的數值，來實現元件的滑動。
2. window.onmousewheel會給事件傳遞一個引數，此引數內有滾輪滑動的距離、方向等。通過判斷這些引數，來判斷分頁元件中的值應該如何更改（速度、方向、距離等）。

// 新增滾輪滑動事件
onmousewheelEvent () {
  let _self = this,
    elements = document.getElementsByClassName('xs-container'),
    regexp = /\d+/g
  window.onmousewheel = function (e) {
    let change = 0,
      transform = elements[1].style.transform,
      valuelist = transform.match(regexp),
      height = elements[1].clientHeight - document.documentElement.clientHeight + 100
    if (height > 0) {
      // transform有多種形式，對應不同狀態下，獲取的值的形式也不一樣(相容ie11瀏覽器的第四種情況（valuelist.length長度為4的情況）)
      // change ：原Y軸位置
      switch (valuelist.length) {
        case 2:
          change = parseInt(valuelist[0])
          break
        case 3:
          change = parseInt(valuelist[1])
          break
        case 4:
          change = parseInt(valuelist[1])
          break
        case 5:
          change = parseInt(valuelist[1])
          break
      }
      //console.log(height+','+change+','+e.wheelDelta)
      //判斷滑動方向（上、下）
      if (e.wheelDelta > 0) {
        if (change === 0) {
          // do nothing
        } else {
        //滑動距離若超過了頂部（如距離頂部只有50，但是此處滑動距離是100），則就是迴歸頂部。滑動時間為600ms
          _self.$refs.scrollerEvent.reset({top: change > 100 ? change - 100 : 0}, 600)
        }
      } else {
        if (change > height) {
        // 滑動到了當前頁的底部，要顯示載入下一頁的動畫，控制此時的滑動距離，若上劃距離過大會導致使用者體驗不佳
          _self.$refs.scrollerEvent.reset({top: height - 50}, 600)
        } else {
          _self.$refs.scrollerEvent.reset({top: change + 100}, 600)
        }
      }
    }
  }
}
 

PS：
其實際使用中發現，獲取到的transform發現會有多種形式。好處是用正則表示式處理後都是陣列型別，但是陣列長度不一。內部元素應該是分別對應X、Y、Z等值，但是有的只有兩個，有的有三個，還發現有的會有多個。這也導致要獲取的Y軸值的元素位置不一。
但是我發現只要獲取的元素個數一定了，那麼Y軸值是第幾個也就確定了。所以我在程式碼中通過使用switch來判斷如何獲取準確的Y軸值。
至於為什麼transform的內容不一（準確說應該是數值多少），會發生變化，我暫時沒有頭腦，謹此記錄，留待後續繼續學習。

createtime：2018-11-16