better-scroll的基本使用（笔记）

什么是better-scroll

better-scroll是一款重点解决移动端各种滚动场景需求的插件。

安装及使用

在控制台输出 npm install better-scroll --save

开始使用

1.先引入下载好的插件

  <div class="wrapper">
      <ul class="content">
      <li>哈哈哈17</li>
      <li>哈哈哈18</li>
      <li>哈哈哈19</li>
    </ul>
  </div>

上面的代码中 BetterScroll 是作用在外层 wrapper 容器上的，滚动的部分是 content 元素。这里要注意的是，BetterScroll 默认处理容器（wrapper）的第一个子元素（content）的滚动，其它的元素都会被忽略。

2.把better scroll封装，方便多次调用

在mounted函数内进行DOM操作

 mounted() {
    this.scroll = new BScroll(document.querySelector('.wrapper'),{
      probeType:3,
      pullUpLoad: true,
      click:true,
    }) 
    //第一个是监听滚动
    this.scroll.on('scroll',(position) => {
      // console.log(position);
    })
    //第二个是监听上啦加载
    this.scroll.on('pullingUp',() => {
      console.log('上啦加载更多');
    })
  }
};

第一个监听滚动需要 probeType = 3，

click: true  表示可以在的 div 里面 实现点击事件

pullUpLoad: true 监听加载事件

常用方法

bscroll.finishPullUp() 一直不断请求数据

bscroll.scrollTo（x ,y,time）滚动到指定位置