1. 程式人生 > >better-scroll的運用(一)

better-scroll的運用(一)

targe 性能優化 先來 性能 sel pan git per zip

最近還在看慕課網的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的運用(一)