better-scroll下拉刷新 上拉加載

1. 安裝

   npm install better-scroll --save

2. 初始化

   <div class="wrapper">
     <!-- better-scroll 只處理容器（wrapper）的第一個子元素（content）的滾動，其它的元素都會被忽略。-->
     <ul class="content">
       <li>...</li>
       <li>...</li>
       ...
     </ul>
     <!-- 這裏可以放一些其它的 DOM，但不會影響滾動 -->
   </div>
   

   import BScroll from 'better-scroll'
   let scroll = new BScroll('.wrapper', {
       scrollY: true,
       click: true
   })
   

   可以滾動的前提：
   1、content要比wrapper高
   2、wrapper寬高值確定並且overflow: hidden

3. 配置屬性

   1. probeType

      • 類型：Number
      • 默認值：0
      • 可選值：1、2、3
      • 作用：有時候我們需要知道滾動的位置。當 probeType 爲 1 的時候，會非實時（屏幕滑動超過一定時間後）派發scroll 事件；當 probeType 爲 2 的時候，會在屏幕滑動的過程中實時的派發 scroll 事件；當 probeType 爲 3 的時候，不僅在屏幕滑動的過程中，而且在 momentum 滾動動畫運行過程中實時派發 scroll 事件。如果沒有設置該值，其默認值爲 0，即不派發 scroll 事件

   2. scrollX
      當設置爲 true 的時候，可以開啓縱向滾動

   3. pullDownRefresh

   類型：Boolean | Object
   默認值：false
   作用：這個配置用於做下拉刷新功能，默認爲 false。當設置爲 true 或者是一個 Object 的時候，可以開啓下拉刷新，
   可以配置頂部下拉的距離（threshold） 來決定刷新時機以及回彈停留的距離（stop）。當下拉刷新數據加載完畢後，需要執行 finishPullDown 方法。見 Demo 。 瞭解更多的細節可以去看 example 中的 scroll 組件代碼。

   
   	pullDownRefresh: {
   	  threshold: 50,
   	  stop: 20
   	}
   

4. 事件屬性/實例屬性

   1. x
      scroll 橫軸座標（右偏移爲+，左偏移爲-）

   2. y
      scroll 縱軸座標。（下偏移爲+，上偏移爲-）

   3. maxScrollY

   ​ 類型：Number

   ​ 作用：scroll 最大縱向滾動位置。(內容多的那部分高度)

   ​ 備註：scroll 縱向滾動的位置區間是 0 - maxScrollY，並且 maxScrollY 是負值

   上拉加載更多時會用到 ， 當 pos.y<maxScrollY-30加載更多（將內容元素 往上偏移 最大能滾動的距離+30,30是強行往上託動的距離）

5.方法
1.refresh()
> 更新數據後 重新計算 better-scroll，當 DOM 結構發生變化的時候務必要調用確保滾動的效果正常

2.scrollToElement(el, time, offsetX, offsetY, easing)

參數：
{DOM | String} el 滾動到的目標元素, 如果是字符串，則內部會嘗試調用 querySelector 轉換成 DOM 對象。
{Number} time 滾動動畫執行的時長（單位 ms）
{Number | Boolean} offsetX 相對於目標元素的橫軸偏移量，如果設置爲 true，則滾到目標元素的中心位置
{Number | Boolean} offsetY 相對於目標元素的縱軸偏移量，如果設置爲 true，則滾到目標元素的中心位置
{Object} easing 緩動函數，一般不建議修改，如果想修改，參考源碼中的 ease.js 裏的寫法
返回值：無
作用：滾動到指定的目標元素。

3.**scrollTo(x, y, time, easing)**
 >參數：

{Number} x 橫軸座標（單位 px）
{Number} y 縱軸座標（單位 px）
{Number} time 滾動動畫執行的時長（單位 ms）
{Object} easing 緩動函數，一般不建議修改，如果想修改，參考源碼中的 ease.js 裏的寫法
返回值：無
作用：滾動到指定的位置

4.**on(type, fn, context)**
 >參數：
{String} type 事件名

{Function} fn 回調函數
{context} 函數執行的上下文環境，默認是 this
返回值：無
作用：監聽當前實例上的自定義事件。如：scroll, scrollEnd, pullingUp, pullingDown等。

import BScroll from 'better-scroll'
let scroll = new BScroll('.wrapper')
function onScroll(pos) {
  console.log(`Now position is x: ${pos.x}, y: ${pos.y}`)
}
scroll.on('scroll', onScroll)

**5.finishPullDown(config)**
 作用：當下拉刷新數據加載完畢後，需要調用此方法告訴 better-scroll 數據已加載。
**6.openPullDown(config)**
動態開啓下拉刷新功能。

6.demo1

<div class="page_wraper" ref="wrap">
    <div class="content">
      <div class="top_tip tc">{{ pullDownMsg }}</div>
      <ul>
          <li v-for="i in list">{{ i }}</li>
      </ul>
      <div class="bottom_tip tc">{{ pullUpMsg }}</div>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import { setTimeout } from 'timers';
export default {
  data() {
    return {
      startNum: 1,
      list: [],
      pullDownMsg: "下拉刷新，發現更多",
      pullUpMsg: "加載中，請稍後...",
      noMsg: "沒有更多了",
      bsScroll: ""
    };
  },

  components: {},

  computed: {},

  mounted: function() {
      this.getList().then((res) => {
        this.list = this.list.concat(res);
      });
      // 初始化
      this.bsScroll = new BScroll(this.$refs.wrap, {
          probeType: 1, 
          click: true
      })
      // 監聽滾動事件
      this.bsScroll.on('scroll', (pos) => {
        if(pos.y > 0 && pos.y <= 40) {
          this.pullDownMsg = '下拉刷新，發現更多';
        }else if(pos.y > 40) {
          this.pullDownMsg = "釋放更新，發現更多"
        }
      })
      // 監聽滾動結束
      this.bsScroll.on('touchEnd', (pos) => {
        if(pos.y > 40) {
          // 重新獲取數據
          this.startNum = this.getRandom(1, 100);
          setTimeout(() => {
            this.getList().then((res) => {
              this.list = res;
              this.pullDownMsg = '下拉刷新，發現更多';
            }) 
          }, 1000)
        }else if(pos.y < this.bsScroll.maxScrollY - 30) {
          // 下拉加載
          this.getList().then((res) => {
            this.list = this.list.concat(res);
            this.bsScroll.refresh();
          })
        }
      })
  },

  methods: {
    getList() {
      // 模擬數據請求
      return new Promise(resolve => {
        setTimeout(() => {
            let start = this.startNum, arr = [];
            for (
                this.startNum;
                this.startNum <= start + 18;
                this.startNum++
            ) {
                arr.push(this.startNum);
                resolve(arr);
            }
        }, 1000);
      });
    },
    getRandom(m, n) {
      return Math.floor(Math.random()*(m - n) + n);
    }
  }
};
</script>

<style lang='scss' scoped>
.page_wraper{
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #eee;
}
.content{
    position: relative;
    min-height: 100%;
}
.top_tip{
    position: absolute;
    top: -35px;
    left: 0;
    width: 100%;
}
.bottom_tip{
    position: absolute;
    bottom: -35px;
    left: 0;
    width: 100%;
}
ul li{
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid #ccc;
    padding: 5px 20px;
}
</style>`

7.demo2

this.getList().then((res) => {
        this.list = this.list.concat(res);
      });
      let listNode = this.$refs.wrap
      this.bsScroll = new BScroll(listNode, {
        probeType: 1,
        click: true,
        pullDownRefresh: true,
        pullUpLoad: true
      })
      this.bsScroll.on("pullingDown", () => {
        console.log("pullingDown")
        this.startNum = this.getRandom(1, 100);
        this.getList().then((res) => {
          this.list = res;
          this.pullDownMsg = "下拉刷新，發現更多";
          this.bsScroll.finishPullDown()
        })
      })
      this.bsScroll.on("pullingUp", () => {
        console.log("pullingUp")
        this.getList().then((res) => {
          this.list = this.list.concat(res);
          this.bsScroll.refresh()
          this.bsScroll.finishPullUp()
        })
      })