介紹
BetterScroll是一款重點解決移動端（已支持PC）各種滾動場景需求的插件嵌纲。它的核心是借鑒的iscroll (opens new window)的實現(xiàn)，它的API設(shè)計基本兼容iscroll澎蛛，在iscroll的基礎(chǔ)上又擴展了一些feature以及做了一些性能優(yōu)化。BetterScroll是使用純JavaScript實現(xiàn)的客燕，這意味著它是無依賴的场勤。
在Vue中安裝
- 使用
npm在項目中安裝:
npm install better-scroll --save
better-scroll實現(xiàn)移動端流暢滾動
在Vue項目中簡單使用
- 使用
VueCLI3以上的腳手架創(chuàng)建一個Vue項目：
vue create better-scroll-demo
- 在項目中安裝
better-scroll:
npm install better-scroll
- 編寫頁面結(jié)構(gòu):這里的頁面結(jié)構(gòu)是由一定要求的，
.wrapper類包裹的元素只能是一個標(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>
- 編寫頁面樣式:
.wrapper {
height: 300px;
background-color: skyblue;
}
- 在
mounted生命周期函數(shù)中創(chuàng)建Better-scroll對象并綁定需要實現(xiàn)滾動的頁面元素狠鸳。
new BS('.wrapper', {})
