如何使用better-scroll？（入门）

如何使用better-scroll？

准备，需要’wrapper’父组件套’content’子组件的结构
注意： 最外层的父组件里面，一定要只放一个标签；

 <div class="wrapper" ref="aaaa">
    <div>
      <!--1.无论是否设置click:false, button都可以点击-->
      <button @click="btnClick">按钮</button>

      <!--2.必须设置click:true, 那么div才能监听点击-->
      <div @click="divClick">呵呵呵呵</div>

      <ul class="content">
        <li>分类列表1</li>

// 1.引入滚动组件

js

 import BScroll from "better-scroll";

2.new滚动组件第一个参数传el；可以写

document.querySelector('.content');或者'.conent'
// 3.用一个变量保存这个实例，避免他被销毁
js

 mounted() {
    this.scroll = new BScroll(this.$refs.aaaa, {
      // probeType: 3,
      // pullUpLoad: true
    });

局部滚动 — 高度 — 溢出隐藏
css

.wrapper {
  height: 150px;
  background-color: red;

  overflow: hidden;
  /*overflow-y: scroll;*/
}

高阶
js 滚动实例配置项
默认情况下；BScroll是不可以实时的监听滚动位置；
probeType: 3,

// 
this.scroll = new BScroll(this.$refs.aaaa, {
  // probeType: 3,
  // --- prode 侦测
  // --- 1,2都是不侦测实时的位置
  // --- 2:手指滚动过程之中侦测,手指离开后的惯性滚动过程中不侦测;
  // --- 3:只要是滚动都侦测;
 

滚动组件内默认不监听点击事件click:true,
// click:true,
// — 这样设置滚动元素内,才能监听点击事件

打开触底事件 监听 pullUpLoad: true

// pullUpLoad: true
// — 监听上拉加载更多
});

传个on相当于，选择监听类型；监听scroll滚动事件

    // 传个on相当于，选择监听类型；监听scroll
this.scroll.on("scroll", position => {
  console.log(position);
});

上拉加载更多的监听函数 pullingUp 重新监听

bscroll.finishPullUp();
   // 上拉加载更多的监听函数
    this.scroll.on("pullingUp", () => {
      console.log("上啦加载更多");
      // --- 只能加载一次
      // 发送网络请求,请求更多页面的数据
      // 等数据请求完成,并且将新的数据展示出来之后
      setTimeout(() => {
        bscroll.finishPullUp();
      }, 2000);

      // --- 让页面可以重新触底刷新
    });