记vue中如何使用better-scroll滚动插件

• Z时代
• 2024-01-10
• 分类：综合

这款插件是基于iscroll插件做的重新封装，改善了一些bug，增加了一些拓展功能，有兴趣的小伙伴们可以自行下载体验体验。

很多人已经用过 better-scroll，我收到反馈最多的问题是：

better-scroll 初始化了， 但是没法滚动。

不能滚动是现象，我们得搞清楚这其中的根本原因。在这之前，我们先来看一下浏览器的滚动原理： 浏览器的滚动条大家都会遇到，当页面内容的高度超过视口高度的时候，会出现纵向滚动条；当页面内容的宽度超过视口宽度的时候，会出现横向滚动条。也就是当我们的视口展示不下内容的时候，会通过滚动条的方式让用户滚动屏幕看到剩余的内容。

better-scroll 也是一样的原理，我们可以用一张图更直观的感受一下：

绿色部分为 wrapper，也就是父容器，它会有固定的高度。黄色部分为 content，它是父容器的第一个子元素，它的高度会随着内容的大小而撑高。那么，当 content 的高度不超过父容器的高度，是不能滚动的，而它一旦超过了父容器的高度，我们就可以滚动内容区了，这就是 better-scroll 的滚动原理。

1安装better-scroll

better-scroll 托管在 Npm 上，执行如下命令安装：

npm install better-scroll --save

2接下来就可以在代码中引入了，webpack 等构建工具都支持从 node_modules 里引入代码：那个组件需要哪里引入

3页面加载时实例化

以上就可实现滚动效果，如有更优方法欢迎指出，谢谢

以上是 记vue中如何使用better-scroll滚动插件 的全部内容， 来源链接： utcz.com/z/378394.html