vue工程 使用滾動組件 vue2-better-scroll 實現上拉加載 下拉刷新

vue2-better-scroll

關於具體安裝&使用過程 請移步api文檔 已經很詳細了 而且超清晰明了。

https://cnpmjs.org/package/vue2-better-scroll

也正是因為太簡潔了 所以有了這篇補充貼

因為我項目使用了雙語 因此 api文檔沒有給出如何動態設置 在下拉刷新時候的語言切換屬性。

zhPullDownRefreshObj 這個字段里的 txt 屬性就是啦。

vue里面這樣寫 ⬇️⬇️

<vue-better-scroll class="wrapper"
                         ref="scroll"
                         :scrollbar="scrollbarObj"
                          :pullDownRefresh="$lang == 'en'? enPullDownRefreshObj : zhPullDownRefreshObj"
                         :pullUpLoad="pullUpLoadObj"
                         :startY="parseInt(startY)"
                         @pullingDown="onPullingDown"
                         @pullingUp="onPullingUp">
        <ul class="list-content">
          <li class="list-item"
              v-for="item in items">{{item}}</li>
        </ul>
      </vue-better-scroll>

　data 里面這么設置 ⤵️⤵️

// 這個配置用於做下拉刷新功能，默認為 false。當設置為 true 或者是一個 Object 的時候，可以開啟下拉刷新，可以配置頂部下拉的距離（threshold） 來決定刷新時機以及回彈停留的距離（stop）
                zhPullDownRefreshObj: {
                    threshold: 90,
                    stop: 40,
                    txt: '刷新成功'
                },
                enPullDownRefreshObj: {
                    threshold: 90,
                    stop: 40,
                    txt: 'Refresh successfully'
                }