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>