better-scroll刷新后才能滑動的解決方案

使用cube-ui時鼠標滾輪無法使用,且老觸發無法滑動的bug,我十分困惑,於是分析了scroll組件,發現better-scroll才是關鍵.

於是我趕緊看了看better-scroll的文檔.發現鼠標滾輪是可以開啟的.開啟之后終於可以愉快的使用鼠標滾輪了.

mouseWheel: true,//開啟鼠標滾輪

 

使用better-scroll,在chrome瀏覽器測試代碼,切換手機模擬器之后,就會出現刷新后才能滑動的"bug".這個問題困擾了我半天,上網搜了很久也沒有找到很好的解決方案.

幾番測試之后,我懷疑是touch事件沒注冊導致的,為了驗證我的猜想,我把源碼下載下來並分析,終於讓我找到了解決關鍵代碼,真是皇天不負有心人啊

方法一

在 better-scroll 的源碼 packages/core/src/base/ActionsHandler.ts 中:

const shouldRegiserTouch = hasTouch && !disableTouch
const sholdRegisterMouse = !disableMouse

這兩個是確定是否需要注冊觸摸事件和鼠標拖動事件的常量.

這里可以進行改動,將其改為變量,判斷當前是否為開發環境,如果是開發環境,就把這兩個變量都設置為true,就行了

let shouldRegiserTouch = hasTouch && !disableTouch
let sholdRegisterMouse = !disableMouse
if(process.env.NODE_ENV==='development') {
  shouldRegiserTouch = true
  sholdRegisterMouse = true
}

經過測試之后果然行得通,但是總修改源碼也不是辦法.....

方法二

修改 packages/shared-utils/src/dom.ts 中的常量hasTouch

export const hasTouch = true

這樣就可以在初始化時對參數進行設置,把一切掌握在自己手中

使用方法如下:

new BScroll時,在參數options中加入

mouseWheel: true,//開啟鼠標滾輪
disableMouse: false,//啟用鼠標拖動
disableTouch: false//啟用手指觸摸

O(∩_∩)O哈哈~又可以愉快的調試了,媽媽再也不用擔心我滑不動屏幕了

 

原文鏈接:https://www.cnblogs.com/mldonkey/p/11421577.html