better-scroll是D8黃軼老師基于iscroll重寫(xiě)的一個(gè)插件，在vue中使用這個(gè)插件能給App帶來(lái)流暢性，提高了用戶體驗(yàn)。

封面.jpg

一、安裝

這個(gè)步驟非常重要，之前是通過(guò)npm install better-scroll --save 來(lái)安裝，這樣安裝的是最新版本。但是，實(shí)戰(zhàn)過(guò)程中發(fā)現(xiàn)了一個(gè)非常嚴(yán)重的bug，多次通過(guò)路由切換組件頁(yè)面滾動(dòng)會(huì)無(wú)效，困擾了我很久很久。
于是，百度一下，發(fā)現(xiàn)根本沒(méi)有出現(xiàn)類似情況。
然后，猜測(cè)是版本問(wèn)題而導(dǎo)致的，最后在package.json里手動(dòng)安裝0.1.15版本，解決了這個(gè)問(wèn)題。

//package.json
"dependencies": {
  "better-scroll": "0.1.15"
}

//終端
npm install

二、html結(jié)構(gòu)

div.wrapper > div.content > ul > li

在這里，分成4層結(jié)構(gòu)。最外層一定要設(shè)置寬度以及定位，外層高度要100%，只能滾動(dòng)第一個(gè)li，因此我們把元素全放到li標(biāo)簽里即可。子元素可以有多個(gè)同級(jí)，但是子元素高度一定要大于父元素，這個(gè)是產(chǎn)生滾動(dòng)的必要條件。

.wrapper{
  width: 100%;
  position: absolute;
  top: 45px;
  bottom: 50px;  /*關(guān)鍵*/
  overflow: hidden;
  z-index: 1;
}

三、初始化

首先要引入組件，需要dom結(jié)構(gòu)加載完成時(shí)才執(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, {
            //開(kāi)啟點(diǎn)擊事件 默認(rèn)為false
            click:true
        })
        // console.log(this.scroll)
        }else if(!this.$refs.wrapper){
            return
        }
        else{
            this.scroll.refresh()
        }
      })
  }

四、優(yōu)點(diǎn)

1.體驗(yàn)像原生：滾動(dòng)非常流暢，而且沒(méi)有滾動(dòng)條。
2.記錄當(dāng)前路由滾動(dòng)位置：在vue中通過(guò)路由切換頁(yè)面時(shí)組件會(huì)自動(dòng)滾動(dòng)到頂部，需要監(jiān)聽(tīng)滾動(dòng)行為才能讓滾動(dòng)位置固定，better-scroll解決了這個(gè)問(wèn)題。

五、最后

如果這篇文章幫助到了你，麻煩點(diǎn)個(gè)贊~

demo.gif