1.使用better-scroll之前先封装
之前有用到了better-scroll，遇到了一些坑，所以记录一下better-scroll的使用。 因为我们可能在项目中的多个地方使用它，我们最好对better-scroll做一层封装，所以在这里封装一个MyScroll组件，封装的目的是当我们需要用到better-scroll时不用每次都引入better-scroll，然后只需要引入我们封装好的这个组件就行，并且之后可以对我们封装好的MyScroll差异化使用(使用的时候传props)
....
<template>
<div class="wrapper" ref="wrapper">
<div class="content">
<slot></slot>
</div>
</div>
</template>
<script>
import Bscroll from "@better-scroll/core";
export default {
name: "MyScroll",
data() {
return {
bscroll: null,
};
},
mounted() {
this.bscroll = new Bscroll(this.$refs.wrapper, {});
},
};
</script>
2.使用better-scroll
2.1 原理
better-scroll的原理是，wrapper必须有固定的高度，且content的高度必须要超过wrapper的高度，才能实现滚动，任何时候引入better-scroll没有发生滚动都要想到这一点，且content是wrapper的第一个子元素，也就是这样的hteml结构：
<div class="wrapper" ref="wrapper">
<div class="content">
<slot></slot>
</div>
</div>
2.2 实例化better-scroll
实例化better-scroll的时候，注意不要在created生命周期里面实例化，因为created生命周期dom还没有挂载，可能会出现获取不到wrapper的情况，而应该在mounted里面实例化
import Bscroll from "@better-scroll/core";
...
mounted() {
this.bscroll = new Bscroll(this.$refs.wrapper, {
});
},
2.2 点击事件
被wrapper包含的元素，默认不会有点击事件，如果要想点击事件生效，要配制click：true
...
props: {
click: {
type: Boolean,
default: false,
},
},
...
mounted() {
this.bscroll = new Bscroll(this.$refs.wrapper, {
click: this.click, //这里click的值是在使用的时候通过props传递进来的
});
},
2.3滚动
如果要监听content内容的滚动，必须设置probeType属性，这个属性的值有四种：
- 0为不派发，是默认值，
- 1为仅当手指按在滚动区域上，每隔多少毫秒派发一次，不设置多少毫秒就和0一样
- 2为当手指按在滚动区域上，一直派发
- 3为任何时候都派发
....
props: {
probeType: {
type: Number,
default: 0,
},
},
....
mounted() {
this.bscroll = new Bscroll(this.$refs.wrapper, {
probeType: this.probeType, //同样通过父组件传进来
});
},
2.4 滚动到某个位置
4.如果需要某种情况下比如点击某个元素滚动到一定位置，可以使用scrollTo方法 scrollTo(x, y, time, easing, extraTransform) 一般只需要传入前面三个参数即可，easing不建议修改
2.5 上拉加载更多
当滚动到内容的底部时，想要加载更多的内容，就要使用它的pullingUp事件，每次完成上拉加载更多都要调用finishPullUp()方法完成这次上拉，以便开启下一次上拉，使用上拉加载更多还需要下载@better-scroll/pull-up插件并注册：
....
import PullUp from "@better-scroll/pull-up";
Bscroll.use(PullUp);
....
props: {
pullUpLoad: {
type: Boolean,
default: false,
},
},
....
mounted() {
this.bscroll = new Bscroll(this.$refs.wrapper, {
pullUpLoad: this.pullUpLoad,
});
},
2.6 当content中加载了很多图片
注意当content中的元素请求了很多图片时，因为初始化scroll一般在mounted中，而初始化时better-scroll会计算一次content内容的高度，那个时候请求的图片还没有下来，图片还没有填充到DOm结构，可能会导致content的高度计算失误，出现滚不动的现象，解决办法是，better-scroll的实例都有一个refresh方法，只要调用这个方法，better-scroll就会从新计算content的高度，那么我们就可以在每张图片加载完成之后调用refresh方法
