因為工作需求，我必須要在Swiper上讓滾輪可以作動，達成左右移動的效果。

以下是我們Swiper精簡過後的基本結構，我們將放在陣列中的資料以V-for的方式產生出來。

<div v-swiper:mySwiper="swiperOption" ref="mySwiper" @mousewheel="scrollFunc">
  <div class="SWline"></div>
  <div class="swiper-wrapper">
    <div class="swiper-slide" v-for="(item, index) in playList" :key="index">
      <div class="swiperList" @mousewheel.self="wheelScroll">
        <p>{{ item.time }}</p>
        <p>{{ item.content }}</p>
        <p>{{ item.score }}</p>
      </div>
    </div>
  </div>
</div>

當時得知這個需求後看了Swiper官方的文件想說只要在 data swiperOption 物件中加上

mousewheel : true 就能輕鬆解決了，結果事情並沒有我想的如此簡單。😅

加上這段後滾輪依舊沒有達成左右移動的效果，再加上網頁本身內容較長，

垂直方向的滾輪依然會繼續運作。

所以我們就有兩個問題要等待解決了。

• 第一個是要讓滑鼠在Swiper組件上時停止垂直方向的滾輪動作。
• 第二個就是達成左右移動的效果。

自己測試過後主要就是利用 preventDefault 去停止預設的行為即可。

scrollFunc(evt) {
  evt = evt || window.event
  evt.preventDefault()
  evt.stopPropagation()
  return false
},

再將這個 Function 以 @mousewheel 的方式加到不希望垂直作動的範圍上，

這樣在該DOM元素上觸發滾輪時，整個網頁就不會跟著上下移動了。

至於第二個問題，則是看官方API後發現他有 slideNext 和 slidePrev 兩個方法。

可以控制Swiper前後移動，就像是多數的輪播套件有前後按鈕一樣。

只是這次我需要利用滾輪來觸發這兩個方法。

知道該怎麼做之後相對的簡單許多，一樣在需要滾輪作用的元素上加入@mousewheel