介紹
BetterScroll是一款重點(diǎn)解決移動(dòng)端（已支持PC）各種滾動(dòng)場(chǎng)景需求的插件。它的核心是借鑒的iscroll (opens new window)的實(shí)現(xiàn)，它的API設(shè)計(jì)基本兼容iscroll，在iscroll的基礎(chǔ)上又?jǐn)U展了一些feature以及做了一些性能優(yōu)化。BetterScroll是使用純JavaScript實(shí)現(xiàn)的，這意味著它是無(wú)依賴的。
在Vue中安裝
- 使用
npm在項(xiàng)目中安裝:
npm install better-scroll --save
better-scroll實(shí)現(xiàn)移動(dòng)端流暢滾動(dòng)
在Vue項(xiàng)目中簡(jiǎn)單使用
- 使用
VueCLI3以上的腳手架創(chuàng)建一個(gè)Vue項(xiàng)目：
vue create better-scroll-demo
- 在項(xiàng)目中安裝
better-scroll:
npm install better-scroll
- 編寫(xiě)頁(yè)面結(jié)構(gòu):這里的頁(yè)面結(jié)構(gòu)是由一定要求的，
.wrapper類包裹的元素只能是一個(gè)標(biāo)簽。這里的.wrapper類名是自定義的，注意后面跟隨一致。
<div class="wrapper">
<div class="hello">
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
<li>列表6</li>
....這里省略若干行
</ul>
</div>
</div>
- 編寫(xiě)頁(yè)面樣式:
.wrapper {
height: 300px;
background-color: skyblue;
}
- 在
mounted生命周期函數(shù)中創(chuàng)建Better-scroll對(duì)象并綁定需要實(shí)現(xiàn)滾動(dòng)的頁(yè)面元素。
new BS('.wrapper', {})
