轉載連接：https://blog.csdn.net/feifanzhuli/article/details/90489488
vue與better-scroll作者文檔：https://zhuanlan.zhihu.com/p/27407024
中文文檔：https://better-scroll.github.io/docs/zh-CN/guide/
移動端整個頁面不想要瀏覽器系統滾動，可以給根標簽添加如下樣式，必須要采取定位，不加定位，沒有效果
.wrapper overflow: hidden position: absolute top: 0 left: 0 right: 0 bottom: 0
介紹：在我們日常的移動端項目開發中，處理滾動列表是再常見不過的需求了，可以是豎向滾動的列表，也可以是橫向的，用better-scroll可以幫助我們實現這個
better-scroll 是什么
better-scroll 是一款重點解決移動端（已支持 PC）各種滾動場景需求的插件。
better-scroll 是基於原生 JS 實現的，不依賴任何框架。它編譯后的代碼大小是 63kb，壓縮后是 35kb，zip 后僅有9kb，是一款非常輕量的 JS lib。
怎么使用 better-scroll
結構
例：常見的列表滾動
<div class="wrapper"> <ul class="content"> <li>...</li> <li>...</li> ... </ul> </div>
以上代碼better-scroll 是作用在外層 wrapper 容器上的，滾動的部分是 content 元素。
加載
<script src="https://unpkg.com/better-scroll/dist/bscroll.min.js"></script>
實例化
> var BScroll = new BScroll('.wrapper');
特別注意
- better-scroll 只處理容器（wrapper）的第一個子元素（content）的滾動，其它的元素都會被忽略。
- 外盒子設置固定寬或高和屬性：overflow: hidden;
當 content的高度不超過父容器的高度，是不能滾動的，而它一旦超過了父容器的高度，我們就可以滾動了，這就是 better-scroll 的滾動原理。
綠色部分為 wrapper，也就是父容器，它會有固定的高度
黃色部分為 content，它是父容器的第一個子元素，它的高度會隨着內容的大小而撐高。
better-scroll 支持很多參數配置，可以在初始化的時候傳入第二個參數。
比如：
let scroll = new BScroll('.wrapper',{ scrollY: true, click: true })
這樣就實現了一個縱向可點擊的滾動效果。better-scroll 支持的參數非常多，可以修改它們去實現更多的特性。通常你可以不改這些參數。
API
api 里面所有的方法和屬性都是實例化對象的。
on （方法）
on(type,fn,context)
參數：
- type：事件名
- fn：回調函數
- context：函數執行的上下文環境，默認是this
- 返回值：無
- 作用：監聽當前實例上的自定義事件。如：scroll，scrollEnd，pullingUp,pullingDown等
示例：
import BScroll from "better-scroll" let scroll = new BScroll (".wrapper") function onScroll(pos){ console.log("scroll") } scroll.on("scroll",onscroll)
scroll （事件）
bs.on(“scroll”,function(){})
參數：{Object} {x, y} 滾動的實時坐標
觸發時機：滾動過程中，具體時機取決於選項中的 probeType。
probeType （屬性）
作用：有時候我們需要知道滾動的位置。
類型：Number
默認值：0
可選值：1、2、3
當 probeType 為 1 的時候，會非實時（屏幕滑動超過一定時間后）派發scroll 事件；當 probeType 為 2 的時候，會在屏幕滑動的過程中實時的派發 scroll 事件；當 probeType 為 3 的時候，不僅在屏幕滑動的過程中，而且在 momentum 滾動動畫運行過程中實時派發 scroll 事件。如果沒有設置該值，其默認值為 0，即不派發 scroll 事件。
scrollEnd （事件）
參數：{Object} {x, y} 滾動結束的位置坐標
觸發時機：滾動結束。
maxScrollY （屬性）
類型：Number
作用：scroll 最大縱向滾動位置。
備注：scroll 縱向滾動的位置區間是 0 - maxScrollY，並且 maxScrollY 是負值。
scrollX （屬性）
類型：Boolean
默認值: false
作用：當設置為 true 的時候，可以開啟橫向滾動。
備注：當設置 eventPassthrough 為 ‘horizontal’ 的時候，該配置無效。
refresh （方法）
作用：重新計算 better-scroll，當 DOM 結構發生變化的時候務必要調用確保滾動的效果正常。例：scroll.refresh();
小栗子：上拉加載，下拉刷新
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } .wrapper { width: 100%; height: 100%; overflow: hidden; } .content { border: solid blue 1px; } .pull-down, .pull-up { position: absolute; width: 100%; height: 50px; line-height: 50px; text-align: center; color: #fff; background: #999; } .pull-down { top: -50px; } .pull-up { bottom: -50px; } li { width: 100%; height: 50px; border: solid red 1px; } </style> <script src="js/bscroll.min.js"></script> <script> window.onload = function () { var p = document.querySelector(".pull-down"); var up = document.querySelector(".pull-up"); //獲取展示內容高度 var h = p.offsetHeight; //標識，當前是否加載完成數據 var endDate = 0; //創建上拉加載的數據 var data = []; //循環添加數據 for (let i = 16; i <= 30; i++) { data.push("列表" + i) } //實例化better-scroll var bs = new BScroll(".wrapper", { probeType: 2 //實時獲取滾動坐標位置 }); //給實例化對象綁定事件方法 bs.on("scroll", onScroll); bs.on("scrollEnd", scrollEnd); //滾動結束后執行scrollEnd function scrollEnd() { var select = p.getAttribute("select"); var selectUp = up.getAttribute("select"); if (select) { // console.log("刷新"); //刷新頁面 location.reload(); } if (selectUp) { // console.log("加載"); loadData(); } } //加載數據的構造函數 function loadData() { //splice 返回截取數據，修改原數組長度 //map //判斷數組數據是否為空，不為空繼續添加節點數據，否則提示數據為空 if (data.length > 0) { //endDate:數據表示還有 endDate = 0; var newData = data.splice(0, 5); document.querySelector(".list").innerHTML += newData.map(function (item) { return "<li>" + item + "</li>" }).join(""); bs.refresh(); } else { up.innerHTML = "沒有數據了"; //endDate:數據表示沒有了，為空 endDate = 1; } } //獲取滾動的實時坐標位置 function onScroll() { //坐標大於提示文字高度后展示相應內容，否則內容 if (bs.y > h) { p.innerHTML = "釋放刷新..." p.setAttribute("select", true); } else { p.innerHTML = "下拉刷新" p.removeAttribute("select"); } //endDate 來判斷是否是已經加載完畢 if (!endDate) { if (bs.y < (bs.maxScrollY + -h)) { up.innerHTML = "釋放加載..."; up.setAttribute("select", true); } else { up.innerHTML = "上拉加載" up.removeAttribute("select"); } } } } </script> </head> <body> <div class="wrapper"> <!-- 滾動DOM --> <div class="content"> <p class="pull-down">下拉刷新</p> <ul class="list"> <li>列表1</li> <li>列表2</li> <li>列表3</li> <li>列表4</li> <li>列表5</li> <li>列表6</li> <li>列表7</li> <li>列表8</li> <li>列表9</li> <li>列表10</li> <li>列表11</li> <li>列表12</li> <li>列表13</li> <li>列表14</li> <li>列表15</li> </ul> <p class="pull-up">上拉加載</p> </div> </div> </body> </html>
參考文檔：http://ustbhuangyi.github.io/better-scroll/doc/zh-hans/api.html