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

1、Better Scroll 滾動原理

 

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

 

 

2.html設置

 

<div class="wrapper">

　　<ul class="content">

　　　　<li>...</li>

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

　　</ul> <!-- 這裏能夠放一些其它的 DOM，但不會影響滾動 -->

</div>

 

3.js設置

 

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

var scroll = new BScroll(wrapper)；

 

4.當better-scroll趕上vue

 

 

ref值不能相同，同時，在不一樣的方法中不要初始化爲同一變量，不然後一個不會被初始化）。<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 
(注意：

<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官方網站：

https://ustbhuangyi.github.io/better-scroll/#/知乎文章"當better-scroll趕上vue"：https://zhuanlan.zhihu.com/p/27407024