better-scroll 的用法

最新推荐文章于 2023-05-28 11:28:32 发布

jjw_zyfx

最新推荐文章于 2023-05-28 11:28:32 发布

阅读量207

点赞数

分类专栏：前端 vue

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

版权

前端同时被 2 个专栏收录

320 篇文章

订阅专栏

vue

161 篇文章

订阅专栏

本文详细介绍如何在Vue项目中引入并使用Better Scroll插件，实现流畅的滚动效果。通过具体代码示例，展示了安装步骤及组件配置方法，同时解释了如何监听滚动事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步安装：

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>

效果：