Better-Scroll框架的基本使用

---

一、BetterScroll 是什么？

BetterScroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件.

二、BetterScroll的使用

1. 安装 : npm install @better-scroll/core --save
2. 导入 : import Bscroll from '@better-scroll/core'
3. 创建一个BetterScroll对象, 并使用一个变量接收它 :

this.scroll = new Bscroll(document.querySelector(".wrapper"), {
})

三、BetterScroll的可选参数

1. probeType

• probeType作用：决定是否派发 scroll 事件，probeType 为 0，在任何时候都不派发 scroll 事件，
• probeType 为 2，仅仅当手指按在滚动区域上，每隔 momentumLimitTime 毫秒派发一次 scroll 事件，
• probeType 为 3，任何时候都派发 scroll 事件，包括调用 scrollTo 或者触发 momentum 滚动动画

2. click

• BetterScroll 默认会阻止浏览器的原生 click 事件。当设置为 true，BetterScroll 会派发一个 click 事件

3. pullUpLoad

• 上拉加载更多, 监听是否已经滚动到底部
• 默认为false, 当设置为true或者是一个object的时候, 开启上拉加载.

四、实时监听BetterScroll滚动的位置

• 调用bscroll的on方法监听滚动事件.
• on方法需要传递两个参数, 第一个是事件类型, 第一个参数是一个函数, 函数本身有一个参数 position, position里面存的是 x和y轴的坐标值

五、BetterScroll可监听的事件

1. scroll : 滚动事件
2. pullingUp : 当距离滚动到底部小于 threshold 值时，触发一次 pullingUp 事件。

!!! 这里出现一个错误

当时导入的时候, 是使用script标签引入的

<script src="https://unpkg.com/@better-scroll/core@latest/dist/core.js"></script>

引入的这个是没有任何插件, 无法实现上拉加载,
需要换成这个引入

<script src="https://unpkg.com/better-scroll@latest/dist/better-scroll.js"></script>

创建BScroll的方式也需要变化

const scroll = BetterScroll.createBScroll(document.querySelector('.wrapper'),{
	pullUpLoad: true
})

六、上拉加载更多

<script>
  const bscroll = BetterScroll.createBScroll(document.querySelector('.content'), {
    // 任何时候都派发 scroll 事件
    probeType: 3,
    // 开启上拉加载更多
    pullUpLoad: true
  })
  bscroll.on("scroll", (position) => {
    // console.log(position);
  })
  // 上拉加载更多
  bscroll.on("pullingUp", () => {
    console.log("上拉加载更多"); 
    // 等数据请求完成, 并且将新的数据展示出来后, 开启下一次的上拉加载更多
    bscroll.finishPullUp()
  })
</script>

七、BScroll的封装以及使用

1. 创建一个Scroll组件
   
2. 在scroll组件里面放一个插槽