前端滾動插件:better-scroll

better-scroll 是什麼

better-scroll 是一款重點解決移動端(已支持 PC)各種滾動場景需求的插件。它的核心是借鑑的 iscroll 的實現,它的 API 設計基本兼容 iscroll,在 iscroll 的基礎上又擴展了一些 feature 以及做了一些性能優化。
better-scroll 是基於原生 JS 實現的,不依賴任何框架。它編譯後的代碼大小是 63kb,壓縮後是 35kb,gzip 後僅有 9kb,是一款非常輕量的 JS lib。

官方文檔寫得很詳細

點擊這裏立刻傳送到better-scroll開發文檔

以下是better-scroll的API

方法 / 通用
better-scroll 提供了很多靈活的 API,當我們基於 better-scroll 去實現一些 feature 的時候,會用到這些 API,瞭解他們會有助於開發更加複雜的需求。

refresh()

參數:無
返回值:無
作用:重新計算 better-scroll,當 DOM 結構發生變化的時候務必要調用確保滾動的效果正常。

scrollTo(x, y, time, easing)

參數:

  • {Number} x 橫軸座標(單位 px)
  • {Number} y 縱軸座標(單位 px)
  • {Number} time 滾動動畫執行的時長(單位 ms)
  • {Object} easing 緩動函數,一般不建議修改,如果想修改,參考源碼中的 ease.js 裏的寫法

返回值:無
作用:滾動到指定的位置,見 Demo 。

scrollBy(x, y, time, easing)

參數:

  • {Number} x 橫軸距離(單位 px)
  • {Number} y 縱軸距離(單位 px)
  • {Number} time 滾動動畫執行的時長(單位 ms)
  • {Object} easing 緩動函數,一般不建議修改,如果想修改,參考源碼中的 ease.js 裏的寫法

返回值:無
作用:相對於當前位置偏移滾動 x,y 的距離。

scrollToElement(el, time, offsetX, offsetY, easing)

參數:

  • {DOM | String} el 滾動到的目標元素, 如果是字符串,則內部會嘗試調用 querySelector 轉換成 DOM 對象。
  • {Number} time 滾動動畫執行的時長(單位 ms)
  • {Number | Boolean} offsetX 相對於目標元素的橫軸偏移量,如果設置爲 true,則滾到目標元素的中心位置
  • {Number | Boolean} offsetY 相對於目標元素的縱軸偏移量,如果設置爲 true,則滾到目標元素的中心位置
  • {Object} easing 緩動函數,一般不建議修改,如果想修改,參考源碼中的 ease.js 裏的寫法

返回值:無
作用:滾動到指定的目標元素。

stop()

參數:無
返回值:無
作用:立即停止當前運行的滾動動畫。

enable()

參數:無
返回值:無
作用:啓用 better-scroll, 默認 開啓。

disable()

參數:無
返回值:無
作用:禁用 better-scroll,DOM 事件(如 touchstart、touchmove、touchend)的回調函數不再響應。

destroy()

參數:無
返回值:無
作用:銷燬 better-scroll,解綁事件。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章