better-scroll是適用于移動(dòng)端app的滾動(dòng)插件，它的核心是借鑒的 iscroll 的實(shí)現(xiàn)，它的 API 設(shè)計(jì)基本兼容 iscroll，在 iscroll 的基礎(chǔ)上又?jǐn)U展了一些 feature 以及做了一些性能優(yōu)化。

1.html結(jié)構(gòu)

這是你的html代碼結(jié)構(gòu)，父元素包裹子元素，才可在子元素上使用此插件，若包裹多個(gè)子元素，則需要分別對(duì)每個(gè)子元素使用此插件.
必須為父元素指定高度，且子元素的高度一定要大于父元素的高度，才可實(shí)現(xiàn)滾動(dòng)效果

<div class="wrapper">
  <ul class="content">
    <li>...</li>
    <li>...</li>
    ...
  </ul>

</div>

2.安裝

npm

npm install better-scroll

yarn

yarn add better-scroll

3.初始化

<script>
//導(dǎo)入包
import BScroll from 'better-scroll'
//創(chuàng)建實(shí)例
let scroll = new BScroll('.wrapper')
</script>

4.重要參數(shù)

（1）probeType

 <script>
        //默認(rèn)情況下BScroll是不可以實(shí)時(shí)的監(jiān)聽滾動(dòng)位置
        //probeType檢測(cè)
        //0,1都是不偵測(cè)實(shí)時(shí)的位置
        //2：在手指滾動(dòng)的過程中檢測(cè)，手指離開后的慣性滾動(dòng)過程中不檢測(cè)
        //3：只要是滾動(dòng)，都檢測(cè)
        let bscroll = new BScroll(document.getElementsByClassName('wrapper'),{
            probeType:3
        })
        bscroll.on('scroll',(position)=>{
            console.log(position)
        })
    </script>

以上代碼將會(huì)打印出滾動(dòng)的實(shí)時(shí)位置

（2）pullUpLoad

 <script>
        let bscroll = new BScroll(document.getElementsByClassName('wrapper'),{
           pullUpLoad:true
        })
        bscroll.on('pullingUp',()=>{
           //此處應(yīng)請(qǐng)求網(wǎng)絡(luò)數(shù)據(jù)
           console.log("上拉加載更多")
           setTimeout(()=>{
               bscroll.finishPullup()
           },2000)
        })
    </script>

pullUpLoad

• 類型：Boolean | Object
• 默認(rèn)值：false
• 作用：這個(gè)配置用于做上拉加載功能，默認(rèn)為 false。當(dāng)設(shè)置為 true 或者是一個(gè) Object 的時(shí)候，可以開啟上拉加載，可以配置離底部距離閾值（threshold）來決定開始加載的時(shí)機(jī)，見 Demo 。了解更多的細(xì)節(jié)可以去看 example 中的 scroll 組件代碼。

pullUpLoade參數(shù)一定要配合pullingUp，finishPullUp使用，
pullingUp的觸發(fā)時(shí)機(jī)是在一次上拉加載的動(dòng)作后，這個(gè)時(shí)機(jī)一般用來去后端請(qǐng)求數(shù)據(jù)。
finishPullUp則是當(dāng)上拉加載數(shù)據(jù)加載完畢后，需要調(diào)用此方法告訴 better-scroll 數(shù)據(jù)已加載，若沒有調(diào)用此方法，則上拉加載的動(dòng)作執(zhí)行完一次就不能再次執(zhí)行了

pullDownLoad同理

5.注意點(diǎn)

（1）better-scroll不能再created（）{}里使用，因?yàn)榇藭r(shí)還沒有渲染頁(yè)面DOM樹，應(yīng)在mounted（）{}中使用