Vue中利用better-scroll组件实现横向滚动功能
程序员文章站
2022-03-04 09:41:32
about最近在学习vue的过程中,仿照去哪儿网的移动端写了个小项目,旨在实践和巩固基础知识,但是今天发现去哪儿的首页上有一个组件用户体验较差,即一个横向列表使用浏览器的原生滚动实现,列表滚动起来较为...
about
最近在学习vue的过程中,仿照去哪儿网的移动端写了个小项目,旨在实践和巩固基础知识,但是今天发现去哪儿的首页上有一个组件用户体验较差,即一个横向列表使用浏览器的原生滚动实现,列表滚动起来较为生涩,很难受,于是乎决定由better-scroll重写这个组件。
better-scroll介绍
better-scroll是黄轶大神(没错,我学长)写的基于i-scroll的一个滚动组件,项目地址:https://github.com/ustbhuangyi/better-scroll
一、滚动的实现原理
better-scroll的滚动原理和浏览器原生滚动原理是一样的,当子盒子的高度大于父盒子的高度,就会出现纵向滚动:
同理,如果子盒子的宽度大于父盒子的宽度,那么就会出现横向滚动 ( 根本原理 )。
二、在vue中使用better-scroll
在vue中使用better-scroll最需要注意的点就是必须等到页面渲染完成再去执行bscroll的实例化,因为better-scroll必须要得到滚动区域的尺寸和父盒子的尺寸,来计算出是否能滚动,所以我们必须要对vue的生命周期有一定的了解。
这里是一个小demo,通过这个demo你将会了解到如何使用better-scroll
三、在vue中实现横向滚动
1. 效果图对比
使用原生滚动:
使用better-scroll:
2. 代码(请看注释)
参考链接
作者:黄轶
链接:https://zhuanlan.zhihu.com/p/27407024
总结
到此这篇关于vue中利用better-scroll组件实现横向滚动的文章就介绍到这了,更多相关vue better-scroll横向滚动内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
推荐阅读
-
【Vue.js实战案例】- Vue.js全家桶递归组件实现绩效考核系统中组织层级结构和选人功能
-
vue中通过使用$attrs实现组件之间的数据传递功能
-
vue利用better-scroll实现轮播图与页面滚动详解
-
vue中利用simplemde实现markdown编辑器(增加图片上传功能)-个人文章-SegmentFault思否
-
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
-
Vue中利用better-scroll组件实现横向滚动功能
-
vue使用better-scroll实现横向滚动的方法实例
-
利用office组件在PPT2007中调用Word实现文字编辑功能
-
利用js实现Vue2.0中数据的双向绑定功能
-
vue利用better-scroll实现轮播图与页面滚动