願你有詩有夢，有坦蕩蕩的遠方

本文宣告：這是一篇學習coderwhy老師的vue2課程的一個筆記,所以本文章是在vue專案中實現，沒學過vue的大佬們可以舉一反三。

使用場景及介紹

BetterScroll 是一款重點解決移動端（已支援 PC）各種滾動場景需求的外掛。它的核心是借鑑的iscroll的實現，它的 API 設計基本相容 iscroll，在 iscroll 的基礎上又擴充套件了一些 feature 以及做了一些效能優化。
BetterScroll 是使用純 JavaScript 實現的，這意味著它是無依賴的。

安裝

npm install @better-scroll/core --save

基本使用

<div class="wrapper" ref="wrapper">
<ul class="scroll-content">
...
</ul>
</div>

data() {
return {
scroll: null,
};
},
mounted() {//不用created，因為那時候還沒將元素放上去
this.scroll = new betterScroll(this.$refs.wrapper,{
// ...... 詳見配置項
});
},
...

常見配置項

1. click

• 型別：boolean
• 預設值：false
• 作用：BetterScroll 預設會阻止瀏覽器的原生 click 事件。當設定為 true，BetterScroll 會派發一個 click 事件，我們會給派發的 event 引數加一個私有屬性`_constructed`，值為 true。

2. probeType

• 型別：number
• 預設值：0
• 可選值：1|2|3
• 作用：決定是否派發 scroll 事件，對頁面的效能有影響，尤其是在`useTransition`為 true 的模式下。

// 派發 scroll 的場景分為兩種：
// 1. 手指作用在滾動區域（content DOM）上;
// 2. 呼叫 scrollTo 方法或者觸發 momentum 滾動動畫（其實底層還是呼叫 scrollTo 方法）
 


// 對於 v2.1.0 版本，對 probeType 做了一次統一

// 1. probeType 為 0，在任何時候都不派發 scroll 事件，
// 2. probeType 為 1，僅僅當手指按在滾動區域上，每隔 momentumLimitTime 毫秒派發一次 scroll 事件，
// 3. probeType 為 2，僅僅當手指按在滾動區域上，一直派發 scroll 事件，
// 4. probeType 為 3，任何時候都派發 scroll 事件，包括呼叫 scrollTo 或者觸發 momentum 滾動動畫

3. pullUpLoad

• 型別：Boolean | Object
• 預設值：false
• 作用：這個配置用於做上拉載入功能，預設為 false。當設定為 true 或者是一個 Object 的時候，可以開啟上拉載入，例如：

pullUpLoad:true,//相當於pullUpLoad:{ threshold:0 }

可以配置離（`threshold`）來決定開始載入的時機。

封裝成一個獨立元件

<template>
<div ref="wrapper" class="wrapper">
<div>
<slot></slot>
</div>
</div>
</template>

<script>
import BScroll from "better-scroll";
export default {
name: "BetterScroll",
data() {
return {
bs: null,
};
},
props: {
probeType: {
type: Number,
default: 0,
},
pullUpLoad: {
type: Boolean,
default: false,
},
},
mounted() {
setTimeout(() => {
this.bs = new BScroll(this.$refs.wrapper, {
probeType: this.probeType,
click: true,
pullUpLoad: this.pullUpLoad,
});
this.bs.on("scroll", (option) => {
this.$emit("scroll", option);
});
this.bs.on("pullingUp", () => {
this.$emit("pullingUp");
setTimeout(() => {
this.bs.finishPullUp();
}, 2000);
});
}, 1000);
},
methods: {
scrollTo(x, y, time = 500) {
this.bs&&this.bs.scrollTo(x, y, time);
},
refresh(){
this.bs&&this.bs.refresh();
}
},
};
</script>

<style scoped>
.wrapper {
overflow: hidden;
}
</style>

使用元件

import betterScroll from "better-scroll";

<better-scroll
:probeType="3"
:pullUpLoad="true"
@scroll="contentScroll"
@pullingUp="contentPullingUp"
>

做世界的水手，奔赴所有的港口