一、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

?

?

<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官方網站： https://ustbhuangyi.github.io/better-scroll/#/

知乎文章"當better-scroll遇上vue"：

https://zhuanlan.zhihu.com/p/27407024

?

轉載于:https://www.cnblogs.com/grove009/p/8000391.html

總結

以上是生活随笔為你收集整理的better-scroll 上拉加载，下拉刷新(解决移动端长页面卡顿)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。