better-scroll 的用法

第一步 安裝：

cnpm install better-scroll --save

第二步在vue中使用（其他相同）

<template>
  <div class="wrapper" style="height: 800px;background-color:deeppink;">
    <ul class="content">
      <li>你好啊</li>
      <button @click="clickMe" style="height: 50px;width: 100px">點我啊</button>
      <li>你好啊</li>
      <li>你好啊</li>
      <li>你好啊</li>
      <li>你好啊</li>
      <li>你好啊</li>
      <li>你好啊</li>
      <li>你好啊</li>
      <li>你好啊</li>
      <li>你好啊</li>
      <li>你好啊</li>
      <li>你好啊</li>
      <li>你好啊</li>
      <li>你好啊</li>
      <li>你好啊</li>
      <li>你好啊</li>
      <li>你好啊</li>
      <li>你好啊</li>
      <li>你好啊</li>
      <li>你好啊</li>
      <li>你好啊</li>
      <li>你好啊</li>
      <li>你好啊</li>
      <li>你好啊</li>
      <li>你好啊</li>
      <li>你好啊</li>
      <li>你好啊</li>
      <li>你好啊</li>
      <li>你好啊</li>
      <li>你好啊</li>
      <li>你好啊</li>
      <li>你好啊</li>
      <li>你好啊</li>
      <li>你好啊</li>
      <li>你好啊</li>
      <li>你好啊</li>
      <li>你好啊</li>
      <li>你好啊</li>
      <li>你好啊</li>
      <li>你好啊</li>
    </ul>
    <!-- 這裏可以放一些其它的 DOM，但不會影響滾動 -->
  </div>
</template>
<script>
  import BScroll from 'better-scroll'
	export default {
		mounted(){
      // let wrapper = document.querySelector('.wrapper')
      // let scroll = new BScroll(wrapper,{
      // 用下邊的一行代替上邊的兩個，這兩種都可以，但是一定要在mounted中不能在
      // create中因爲create中dom還沒有進行渲染裏所以獲取不到元素
      let scroll = new BScroll('.wrapper',{
        probeType:3,
        click:true
      })
      scroll.on("scroll",(obj)=>{
        console.log(obj)
      })
    },
    methods:{
      clickMe(e){
        console.log("點我了",e)
      }
    }
	}
</script>

效果：

解釋：

如果需要監聽某個事件的使用方法是這樣的：