vue中使用better-scroll

 

1.创建vue-cli3项目   指令 vue create 项目名

 

2.要想使用better-scroll 需要先引入 better-scroll的插件  

这里采用 npm的方式    指令 npm install better-scroll -- save (项目依赖)

 

3.多个列表的展示     当前情况下是全局的滚动

4.我们希望制定某一个区域可以滚动

原生的方式 

需要给

这些li的父亲设置     当然，这种原生的方式在移动端会很卡  ，放弃使用

5.采用better-scroll实现滚动   引入better-scroll插件  和在mounted生命周期创建better-scroll实例对象    而且还有弹框效果   这里需要注意的是content外层必须要包上一层wrapper content也是惟一的，content里面可以有很多元素

6.  借助文档实现功能

<template>
  <div id="app">
    <div class="wrapper" ref="aaa">
      <ul class="content">
        <button>按钮</button>
        <li v-for="n in 100" :key="n">分类列表{{n}}</li>
      </ul>
    </div>
  </div>
</template>
<script>
import BScroll from "better-scroll";
export default {
  name: "App",
  //组价创建完后操作DOM元素
  mounted() {
    // console.log(this.$refs.aaa);
    // console.log(document.querySelector(".wrapper"));

    //默认情况下bscroll是不可以实时监听滚动的
    //probe  侦测
    //0,1 都是不侦测实时的位置
    //2:在手指滚动的过程中侦测，手指离开后的惯性过程中不侦测
    //3：只要是滚动，就监听
    //click 默认是false  warpper里面默认的原生事件是不能监听的
    const bs = new BScroll(document.querySelector(".wrapper"), {
      probeType: 3,
      click: false,
      pullUpLoad: true
    });

    // 监听滚动类型
    bs.on("scroll", position => {
      console.log(position);
    });

    //上拉加载事件
    bs.on("pullingUp", () => {
      console.log("上啦记载更多");
      //发送网络请求，请求跟多页的数据

      //等数据请求完成，并且将新的数据展示出来后
      setInterval(() => {
        bs.finishPullUp();
      }, 2000);
    });

    // document.querySelector('button').addEventListener('click',function(){
    //   console.log("被点击了")
    // })

    // document.querySelector('button').onclick=function(){
    //   console.log("sdsd");
    // }
  }
};
</script>
<style>
* {
  padding: 0;
  margin: 0;
}
.wrapper {
  height: 150px;
  background-color: red;
  overflow: hidden;
  /* overflow-y: scroll; */
}
</style>