better-scroll 上拉載入，下拉刷新(解決移動端長頁面卡頓)

-Advertisement-

一、Better Scroll 滾動原理 1.下圖能直觀的表示better-scroll的滾動原理 2.html設置 <div class="wrapper"> <ul class="content"> <li>...</li> <li>...</li> ... </ul> <!-- 這裡可以放一些 ...

一、Better Scroll 滾動原理

1.下圖能直觀的表示better-scroll的滾動原理

2.html設置

　　　　<li>...</li> ...

</ul>

</div>

3.js設置

var wrapper = document.querySelector('.wrapper')；

var scroll = new BScroll(wrapper)；

4.當better-scroll遇上vue

<template>
  <div class="wrapper" ref="wrapper">
    <ul class="content">
      <li v-for="item in data">{{item}}</li>
    </ul>
    <div class="loading-wrapper"></div>
  </div>
</template>
<script>
  import BScroll from 'better-scroll'
  export default {
    data() {
      return {
        data: []
      }
    },
    created() {
      this.loadData()
    },
    methods: {
      loadData() {
        requestData().then((res) => {
          this.data = res.data.concat(this.data)
          this.$nextTick(() => {
            if (!this.scroll) {
              this.scroll = new Bscroll(this.$refs.wrapper, {})
              this.scroll.on('touchend', (pos) => {
                // 下拉動作
                if (pos.y > 50) {
                  this.loadData()
                }
              })
            } else {
              this.scroll.refresh()
            }
          })
        })
      }
    }
  }
</script>

//上拉載入
if(this.scroll.y <= (this.scroll.maxScrollY + 50) && this.loading) {
}
//this.loading 一個設置當前是否載入的開關變數，進行完if判斷後置為false，當請求完成後置為true


5.常用參數

better-scroll 預設參數:
click：false，
tap：false，
probeType（Number），預設值為0，可選值1,2,3
0（預設）不派發scroll事件，
1 會非實時（屏幕滑動超過一定時間後）地派發scroll事件，
2 在屏幕滾動過程中會實時地派發scroll事件，
3 不僅在屏幕滾動的過程中，而且在momentum（動量）滾動動畫運行過程中實時派發scroll事件。

6.我在開發中遇到的問題

在頁面中的同一區域我初始化了兩個BScroll 
(註意：ref值不能相同，同時，在不同的方法中不要初始化為同一變數，否則後一個不會被初始化）。


<div>

 <div v-if="" class="wrapper" ref="wrapper">
　　<ul>
　　　　<li></li>

　　　　<li></li>

　　　　<li></li>

　　　　……

　　</ul>
　</div>

 <div v-else class="wrapper" ref="myWrapper">

　　<ul>
　　　　<li></li>

　　　　<li></li>

　　　　<li></li>

　　　　……

　　</ul>

　</div>

</div>

進行滾動的list列表有個加入購物車的功能，第一個Bs（wrapper）進行加入購物車操作時是沒有任何問題的，
但是在該區域的另一個Bs（myWrapper）進行加入購物車操作時，會連續向伺服器請求兩次。

查資料說需要將 event._constructed 設置為true，但令我百思不得其解是為什麼第一個區域可以，同樣的代碼就不適用於第二個區域呢，雖然覺得（

將 event._constructed 設置為true），是行不通的，但還是試了試。最後也證明瞭我的猜想(在1.5.5版本中，已經修複了點擊事件觸發兩次的問題，
如果你開發時使用的是低版本可以試試這種解決方案。高版本就不必了)。

我的解決方案：

在進行wrapper的初始化時，設置click或tap參數值為true，

而在進行myWrapper的初始化時，不設置click及tap參數，即讓它們取預設值false，這樣就完美解決了我的問題。

7.一個不成熟的小建議

在我之前的博文dropload.js中也介紹過我自己開發過程（上拉載入，下拉刷新）中遇到的一些問題，但是dropload的坑還是很多的，個人認為，better-scroll更好一點。
官方說法，better-scroll是iScroll的升級版本。因此我建議在實現移動端“上拉載入，下拉刷新”功能時，建議您使用better-scroll。

8.拋磚引玉

better-scroll官方網站：

您的分享是我們最大的動力!

-Advertisement-