学习BetterScroll

1. 什么是 BetterScroll

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

2. 它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。

3. BetterScroll 是使用纯 JavaScript 实现的，不依赖任何框架，这意味着它是无依赖的。

4. 编译后的代码大小是 63kb，压缩后是 35kb，zip 后仅有9kb，是一款非常轻量的 JS lib。

2. 安装

1. 安装带有所有插件的 BetterScroll
   npm install better-scroll -S

2. 核心滚动，大部分情况可能只需要一个简单的滚动
   npm install @better-scroll/core

3. 直接到github上下源码
   https://github.com/ustbhuangyi/better-scroll/blob/master/README_zh-CN.md

4. CDN

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

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

3. 使用

3.1 布局

了解better-scroll滚动这张图是必不可少的：

1. 绿色部分为 wrapper，也就是父容器，它会有固定的高度。
2. 黄色部分为 content，它是父容器的第一个子元素，它的高度会随着内容的大小而撑高。
3. 那么，当 content 的高度不超过父容器的高度，是不能滚动的，而它一旦超过了父容器的高度，我们就可以滚动内容区了，这就是 BetterScroll 的滚动原理。

3.2 结构

BetterScroll 最常见的应用场景是列表滚动，我们来看一下它的 html 结构。

	<!-- 
		这里的wrapper和content是它的结构。
		名字是可以随便更改的。
		class="content"也可以不要，但是一定是要有wrapper中包裹一个元素
	-->
	<div class="wrapper">
	  <ul class="content">
	    <li>...</li>
	    <li>...</li>
	    <li>...</li>
	    <li>...</li>
	    ...
	  </ul>
	  <!-- 这里可以放一些其它的 DOM，但不会影响滚动 -->
	</div>

3.3 初始化

最简单的初始化代码如下:

	import BScroll from '@better-scroll/core'
	let wrapper = document.querySelector('.wrapper')
	let scroll = new BScroll(wrapper)

如果是直接引入的js源码

  let wrapper = document.querySelector('.wrapper')
  let bscroll = new BScroll(wrapper);

3.4 API(常用)

官方API

3.4.1 属性

1. probeType

• 类型：number
• 默认值：0
• 可选值：1|2|3
• 作用：决定是否派发 scroll 事件，对页面的性能有影响，尤其是在 useTransition 为 true 的模式下。

   probeType:
     1. 有四个值：{
               0：不监听滚动,
               1：不监听滚动,
               2：监听手指触摸时的滚动，惯性滚动不监听,
               3：监听所有的滚动,
             }

1. 当 probeType 为 1 的时候，会非实时（屏幕滑动超过一定时间后）派发scroll 事件；
2. 当 probeType 为 2 的时候，会在屏幕滑动的过程中实时的派发 scroll 事件；
3. 当 probeType 为 3 的时候，不仅在屏幕滑动的过程中，而且在 momentum 滚动动画运行过程中实时派发 scroll 事件。
4. 如果没有设置该值，其默认值为 0，即不派发 scroll 事件。

      let bscroll = new BScroll(wrapper ,{
            probeType: 3,
          });

2. click

在使用scroll之后better-scroll管理下的元素点击事件是不起效果的，但是通过这个属性即可使 better-scroll 控制下的滑动元素能够触发点击。

• 类型：boolean

• 默认值：false

• 作用：BetterScroll 默认会阻止浏览器的原生 click 事件。当设置为 true，BetterScroll 会派发一个 click 事件，我们会给派发的 event 参数加一个私有属性 _constructed，值为 true。
  probeType （属性）

  let bscroll = new BScroll(wrapper ,{
        click: true,
      });

3. pullUpLoad 选项对象

设置pullUpLoad : true实际上时设置了threshold

threshold

• 类型： number

• 默认值： 0

• 触发上拉事件的阈值。

提示

当 pullUpLoad 配置为 true 的时候，插件内部使用的是默认的插件选项对象。

const bs = new BScroll('.wrapper', {
  pullUpLoad: true
})

// 相当于
const bs = new BScroll('.wrapper', {
  pullUpLoad: {
    threshold: 0
  }
})

搭配pullingUp事件使用

3.4.2 方法

on(type, fn, context)

• 参数：

1. {string} type 事件名
2. {Function} fn 回调函数
3. {Object} context 函数执行的上下文环境，默认是 this
   返回值：无

• 作用：监听当前实例上的钩子函数。如：scroll、scrollEnd 等。
  示例：

	import BScroll from '@better-scroll'
	let scroll = new BScroll('.wrapper', {
	  probeType: 3
	})
	function onScroll(pos) {
	    console.log(`Now position is x: ${pos.x}, y: ${pos.y}`)
	}
	scroll.on('scroll', onScroll)

2. scrollTo(x, y, time, easing, extraTransform)

• 参数：

1. {number} x 横轴坐标（单位 px）
2. {number} y 纵轴坐标（单位 px）
3. {number} time 滚动动画执行的时长（单位 ms）
4. {Object} easing 缓动函数，一般不建议修改，如果想修改，参考源码中的 packages/shared-utils/src/ease.ts 里的写法
5. {Object} extraTransform，只有在你想要修改 CSS transform 的一些其他属性的时候，你才需要传入此参数，结构如下：

	let extraTransform = {
	  // 起点的属性
	  start: {
	    scale: 0
	  },
	  // 终点的属性
	  end: {
	    scale: 1.1
	  }
	}
bs.scrollTo(0, -60, 300, undefined, extraTransform)

• 返回值：无
• 作用：相对于当前位置偏移滚动 x,y 的距离。

3.4.3 事件

1. scroll 事件

  bscroll.on("scroll", (position) => {
    // console.log(position);
  })

2. pullingUp事件

	bscroll.on("pullingUp",()=>{
      console.log("pullingUp");
      setTimeout(()=>{
        this.bscroll.finishPullUp();
      },2000)
    })