BetterScroll的说明与使用

一、BetterScroll的下载

①、可以直接到github上面下载

②、也可以在脚手架命令安装

npm install better-scroll --save

具体内容也可参考这里

二、BetterScroll的基本使用

/*导入BetterScroll*/
import BScroll from 'better-scroll';
/*在Vue里面的mounted使用BetterScroll*/
……
mounted() {
  this.scroll = new BScroll('.wrapper')
}
……

/*CSS*/
.wrapper {
  height: 150px;
  background-color: red;
  overflow: hidden;
}

/*组件*/
<div class="wrapper">
  <ul class="content">
    <li>wwwww1</li>
    <li>wwwww2</li>
    <li>wwwww3</li>
    <li>wwwww4</li>
    <li>wwwww5</li>
    <li>wwwww6</li>
    <li>wwwww7</li>
    <li>wwwww8</li>
    <li>wwwww9</li>
    <li>wwwww10</li>
    <li>wwwww11</li>
    <li>wwwww12</li>
    <li>wwwww13</li>
  </ul>
</div>

三、滚动监听

/*
* 在默认情况下BetterScroll是不可以实时监听滚动的，但我们可以利用他的属性来达到实时监听的目的（probeType）
* 0：为probeType的默认值，不会进行实时监听
* 1：不会进行实时监听
* 2：只在手指滚动的时候侦测，在手指离开屏幕后的惯性滚动过程则不会侦测
* 3：只要是滚动就可以侦测
*/

mounted() {
  const scroll = new BScroll('.wrapper', {
    probeType: 3				/*设置实时监听*/
  });
  scroll.on('scroll', (event) => console.log(event))	/*实时监听*/
  /*且event为对象*/
}

结果：

四、点击事件可能会失效

/* BetterScroll 默认会阻止浏览器的原生click 事件，当click设置为true时，则可以进行事件监听
*/
const scroll = new BScroll('.wrapper', {
  probeType: 3,
  click: true
});

对button不会失效，对div会失效

五、上拉加载

const scroll = new BScroll('.wrapper', {
  probeType: 3,
  pullUpLoad: true
});

scroll.on('pullingUp', () => {			/*下拉加载事件*/
  ……
  scroll.finishPullUp();				/*必须有，如果没有就只能进行一次下拉加载*/
})

六、refresh()

作用：当加载完内容的时候，需要重新计算 better-scroll里面的内容高（宽）度，应用于当 DOM 结构发生变化的时候务必要调用确保滚动的效果正常（以免出现BUG）。

七、BetterScroll的简单封装

/*简单封装组件*/
<template>						
  <div ref="wrapper">				/*外层，并用ref来标记该div*/
    <div>							/*内层（只能有一个）*/
      <slot></slot>					/*内层的内容*/
    </div>
  </div>
</template>

<script>
  import BScroll from 'better-scroll';		/*导入*/
  
  export default {
    name: 'Scroll',
    data() {
      return {
        scroll: null						/*保存scroll对象*/
      }
    },
    props: {
      probeType: {							/*可动态设定scroll的probeType属性，利于扩展*/
        type: Number,
        default: 0
      },
      pullUpLoad: {							/*可动态设定scroll的pullUpLoad属性，利于扩展*/
        type: Boolean,
        default: false
      }
    },
    mounted() {
      this.scroll = new BScroll(this.$refs.wrapper, {		/*在挂载完的时候实例化scroll对象并赋值，
      注意这里的this.$refs.wrapper的目的是为了获得scroll的外层div对象，这里用class或者id来都不太合适*/
        probeType: this.probeType,						/*设置属性*/
        pullUpLoad: this.pullUpLoad,
        click: true
      });
      this.scroll.on('scroll', (e) => {
        this.$emit('position', e);				/*当发生滚动时，发送事件*/
      });
      this.scroll.on('pullingUp', () => {
        this.$emit('pullUp');					/*当发生下拉加载时，发送事件*/
        this.scroll.refresh();					/*当加载完内容的时候，需要重新计算 better-scroll，以免出现bug*/
        this.scroll.finishPullUp();				/*必须有该语句，没有就无法进行多次刷新*/
      })
    },
    methods: {
      scrollTo(x, y, time = 500) {				/*scrollTo的方法包装，time默认为500*/
        this.scroll && this.scroll.scrollTo(x, y, time);
      }
      
    }
  }
</script>

<style scoped lang = "scss">
</style>

八、BetterScroll的1.x与2.x的区别

来自官网

BetterScroll 2.X 里面，我们将 1.X 耦合的 feature 拆分至插件，以达到按需加载、减少包体积的目的。因此，@better-scroll/core 只提供了最核心的滚动能力。如果想要实现上拉刷新、下拉加载的功能，你需要使用对应的插件。

BetterScroll的2.x是1.x的精简版，他可以通过plugin来达到需要实现的功能

本文只用于个人学习与记录