版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
第一步 安装:
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>
效果:
解释:
如果需要监听某个事件的使用方法是这样的: