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，{})

}

}