better-scroll的運用(一)
最近還在看慕課網的vue外賣實戰視頻,這裏面運用到了better-scroll。
首先來介紹下better-scroll,復制別人的介紹:
better-scroll 是一款重點解決移動端(已支持 PC)各種滾動場景需求的插件。它的核心是借鑒的 iscroll 的實現,它的 API 設計基本兼容 iscroll,在 iscroll 的基礎上又擴展了一些 feature 以及做了一些性能優化。
better-scroll 是基於原生 JS 實現的,不依賴任何框架。它編譯後的代碼大小是 63kb,壓縮後是 35kb,gzip 後僅有 9kb,是一款非常輕量的 JS lib。
最簡單的初始化:
import BScroll from ‘better-scroll‘
let wrapper = document.querySelector(‘.wrapper‘) let scroll = new BScroll(wrapper)
然而better-scroll 提供了一個類,實例化的第一個參數是一個原生的 DOM 對象。當然,如果傳遞的是一個字符串,better-scroll 內部會嘗試調用 querySelector 去獲取這個 DOM 對象。
import BScroll from ‘better-scroll‘
let scroll = new BScroll(‘.wrapper‘)
npm安裝:
npm install better-scroll --save
該部分運用了better-scroll插件
實現滾動的代碼
methods:{
_initScroll(){
this.menusScroll = new BScroll(this.$refs.menuWrapper,{})
this.foodsScroll = new BScroll(this.$refs.foodsWrapper,{})
}
}
better-scroll的運用(一)