better-scroll

最新推荐文章于 2025-06-02 03:56:06 发布

原创最新推荐文章于 2025-06-02 03:56:06 发布 · 910 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#better-scroll

vue.js 专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何在Vue项目中使用Better Scroll库实现平滑的滑动效果。通过在GitHub上查找并安装Better Scroll，然后在项目中正确配置和使用，可以轻松地为网页添加流畅的滚动体验。文章详细解释了组件结构、样式设置及初始化过程。

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

作用：实现滑动效果
首先，在github上搜索better-scroll
https://github.com/ustbhuangyi/better-scroll
在vue中安装npm install better-scroll --save
引入：import BScroll from ‘better-scroll’
按照里面的用法：套两层容器

<div class="wrapper">
  <ul class="content">
    <li>...</li>
    <li>...</li>
    ...
  </ul>
</div>

获取dom元素：利用ref=wrapper
this.scroll = new BScroll(this.$refs.wrapper)
注意：一定要两层容器，content代表滑动的区域
外层wrapper布局：

.wrapper {
	overflow: hidden;
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;	
}
//保证里面容器content的内容要高于wrapper

//有时候，没有设置mousewheel属性导致各方面都书写无误但是在电脑上却不能实现滑动，是没有实现鼠标滚轮事件
mounted() {
			this.$nextTick(() => {
        		this.scroll = new BScroll(this.$refs.wrapper, {"mouseWheel": true})
        		console.log(this.scroll)
      		})
 		}