详解vuebetter-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,这里需要注意的有两点。
- 只能有一层父级div,也就是容器
- 父级div要设置溢出隐藏,并且固定高度
横向滚动
横向滚动,相比纵向滚动需要动态的去获取滚动区的宽度,直接上代码。
- {{item.title}}
横向滚动需要注意。
- 只能有一层父级div,也就是容器
- 父容器要设置溢出隐藏并固定宽度
- 动态获取滚动区的宽度
因为最近项目需要,所以从网上查阅了许多资料也无法解决我的问题。 BetterScroll 官网也没有提供实际demo参考,所以就利用休息时间,写了这篇文章。希望能对你们有用。需要具体 demo 请移步,别忘了给个star啊,写文章不容易,给个赞呗!
tips:上文的代码可以直接使用,小伙伴们安装完依赖后可以直接copy测试哦~
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
名称栏目:详解vuebetter-scroll滚动插件排坑
文章路径:http://ybzwz.com/article/gsdejs.html