better-scroll是D8黃軼老師基于iscroll重寫的一個插件龄句，在vue中使用這個插件能給App帶來流暢性，提高了用戶體驗。
封面.jpg
一、安裝
這個步驟非常重要霸株，之前是通過npm install better-scroll --save 來安裝，這樣安裝的是最新版本集乔。但是去件，實戰(zhàn)過程中發(fā)現(xiàn)了一個非常嚴重的bug坡椒，多次通過路由切換組件頁面滾動會無效，困擾了我很久很久尤溜。
于是倔叼，百度一下，發(fā)現(xiàn)根本沒有出現(xiàn)類似情況宫莱。
然后丈攒，猜測是版本問題而導致的，最后在package.json里手動安裝0.1.15版本授霸，解決了這個問題巡验。
//package.json
"dependencies": {
"better-scroll": "0.1.15"
}
//終端
npm install
二、html結構
div.wrapper > div.content > ul > li
在這里碘耳，分成4層結構显设。最外層一定要設置寬度以及定位，外層高度要100%辛辨，只能滾動第一個li捕捂，因此我們把元素全放到li標簽里即可。子元素可以有多個同級斗搞，但是子元素高度一定要大于父元素指攒，這個是產(chǎn)生滾動的必要條件。
.wrapper{
width: 100%;
position: absolute;
top: 45px;
bottom: 50px; /*關鍵*/
overflow: hidden;
z-index: 1;
}
三僻焚、初始化
首先要引入組件允悦，需要dom結構加載完成時才執(zhí)行初始化（$nextTick）。因此虑啤，需要用上鉤子函數(shù)created()或者mounted()隙弛。
<div class="wrapper" ref="wrapper">
<div class="content">
<ul>
<li></li>
</ul>
</div>
</div>
import BScroll from 'better-scroll'
mounted() {
this.$nextTick(() => {
//$refs綁定元素
if(!this.scroll){
this.scroll = new BScroll(this.$refs.wrapper, {
//開啟點擊事件 默認為false
click:true
})
// console.log(this.scroll)
}else if(!this.$refs.wrapper){
return
}
else{
this.scroll.refresh()
}
})
}
四、優(yōu)點
1.體驗像原生：滾動非常流暢咐旧，而且沒有滾動條驶鹉。
2.記錄當前路由滾動位置：在vue中通過路由切換頁面時組件會自動滾動到頂部，需要監(jiān)聽滾動行為才能讓滾動位置固定铣墨，better-scroll解決了這個問題室埋。
五、最后
如果這篇文章幫助到了你伊约，麻煩點個贊~
demo.gif
