前端vue使用better-scroll實現下拉刷新，上拉加載

前端下拉刷新，上拉加載的實現一直都有很多坑，今天入以下  better-scroll  的坑，先附上 better-scroll 的官方文檔，如果要深入使用還是得看文檔 查看鏈接

第一步

先看下better-scroll實現時的dom結構,如下代碼

<div class="scroller" ref="scroller">
  <div class="scroll-list">
    <div class="scroll-item"></div>
    <div class="scroll-item"></div>
    <div class="scroll-item"></div>
    <div class="scroll-item"></div>
    <p class="loading">{{ loadingText}}</p>
  </div>
</div>

如上

1. 類  .scroller  就是初始化 better-scroll 時作用的 dom （容器）, 這個元素需要有個固定的高度，然后需要設置  overflow 的樣式，經嘗試設置  overflow: hidden; 或者  overflow-y: auto; 都可以
2. 類  .scroll-list 就是要滾動的容器,這個盒子不需要給多余的樣式（類似高度或者 overflow 的樣式），它的高度是列表的內容撐開的，但有一個要求，當初始化  better-scroll 時這個盒子的高度是大於容器  .scroller 的。
3. 類  .loading 是列表底部類似 “上拉加載”，“沒有更多了”這樣的提示，可以根據列表的狀態動態的更改里面的內容

第二步

初始化 better-scroll, 代碼如下（可以將這一步放在第三步調用，不需要拎出來直接調用）

initScroller() {
  //初始化betterScroll
  let self = this
  self.scroller = new BScroll(self.$refs.scroller, {
    probeType: 1,
    click: true
  })
  self.scroller.on('touchend', function (position) {
    if (position.y < this.maxScrollY - 30) { // 上拉加載
      if (self.isNoMore) return self.loadingText = '沒有更多了...'
      self.loadingText = '加載中...'
      setTimeout(function () {
        self.getList()
      }, 1000)
    }
    if (position.y > 80) { // 下拉刷新
      self.list.length= 0
      self.loadingText = '刷新中...'
      setTimeout(function () {
        self.getList()
      }, 1000)
    }
  })
}

 

如上代碼(vue)

1. 如果在 vue 中使用，並且在其他作用域需要使用初始化后的實例  scroller ，可以將其掛載的 vue 的 data 屬性上，在  mounted  或者  this.$nextTick(() => {/* 初始化代碼*/}) 方法中初始化
2. 初始化時的第二個參數根據自己的需求傳遞，可以不傳
3. 這時候你的頁面在上拉和下拉的時候就已經有了 Q 彈的效果，如果沒有請檢查自己的代碼
4. 監聽  touchend 方法就是為了加上拉加載和下拉刷新
5.   this.maxScrollY  是 scroller 的屬性（this 指向 self.scroller 並不是指向 vue的）
6. 加  setTimeout  是為了過度平滑一點有個加載中的效果，也可以不加
7. 如果只是做下拉刷新上拉加載  probeType 設置為1就可以，其他值的定義請參考官方文檔

第三步

當頁面發生變化時刷新 better-scroll，如下 this 是vue中的代碼

getList () {
  ...
  ..，
  ...
  this.$nextTick(() => {
    this.loadingText = '上拉加載'
    if (this.isNoMore) {
      this.loadingText = '沒有更多了...'
    }
    this.scroller ? this.scroller.refresh() : this.initScroller()
  })
}

 

1. 這里有個判斷，如果已經初始化就刷新 better-scroll 否則就初始化 better-scroll.（好處就是可以直接將其寫在請求列表之后，不用單獨拎出來調用 initScroller 代碼）
2. 這個方法需要在dom掛載在頁面之后調用， vue 請寫在  $nextTick 方法中

以上代碼就是上拉加載下拉刷新的基本代碼

 

下面總結一些坑點

1. 手指觸摸了一點頁面就哧溜滑動了好多，可能是給容器設置  -webkit-overflow-scrolling: touch; 樣式了，刪掉即可

2. 添加better-scroll 后頁面需要橫向滾動的地方不能滾動，添加  eventPassthrough: 'horizontal' 配置，具體原因參考官方文檔該配置介紹

 

 

待續