这次给大家带来vue better-scroll的滚动插件使用详解，使用vue better-scroll的滚动插件的注意事项有哪些，下面就是实战案例，一起来看一下。
BetterScroll号称目前最好用的移动端滚动插件，因此它的强大之处肯定是存在的。要不…哈哈。个人感觉还是很好用的。这篇文章不是笼统的讲 BetterScroll ，而是单讲滚动，想要深入了解它，请移步这里 。
滚动原理
better-scroll 是什么滚动原理
better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。
better-scroll 是基于原生 JS 实现的，不依赖任何框架。它编译后的代码大小是 63kb，压缩后是 35kb，gzip 后仅有 9kb，是一款非常轻量的 JS lib。
绿色部分为 wrapper，也就是父容器，它会有固定的高度。黄色部分为 content，它是父容器的第一个子元素，它的高度会随着内容的大小而撑高。那么，当 content 的高度不超过父容器的高度，是不能滚动的，而它一旦超过了父容器的高度，我们就可以滚动内容区了。横向滚动的原理一致就是将固定高度改为固定宽度。（这里就不啰嗦了）
纵向滚动
废话不多说，我们直接上代码。
- {{item}}
登录后复制
这是一个Vue BetterScroll纵向滚动demo,这里需要注意的有两点。
只能有一层父级p，也就是容器
父级p要设置溢出隐藏，并且固定高度
横向滚动
横向滚动，相比纵向滚动需要动态的去获取滚动区的宽度，直接上代码。
- {{item.title}}
登录后复制
横向滚动需要注意。
只能有一层父级p，也就是容器
父容器要设置溢出隐藏并固定宽度
动态获取滚动区的宽度
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
立即学习“前端免费学习笔记（深入）”；
在vue中的全选与反选
使用mint-ui时间插件时怎么获取选择值
以上就是vue better-scroll的滚动插件使用详解的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2773175.html
