better-scroll 的用法

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/jjw_zyfx/article/details/102767845

第一步 安装：

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>

效果：

解释：

如果需要监听某个事件的使用方法是这样的：