cube-ui 移动端滑动效果

折月煮酒 提交于 2019-12-06 20:37:04

移动端,常见的tab切换效果比较多,今天,我就用cube-ui ,这个移动端非常火的UI框架来实现。我们使用vue来做tab切换效果的时候,往往倾向于用路由实现,其实也可以用组件来实现,而且在滑动效果的细节上更加完善。

首先完成tab的切换,使用 cube-tab-bar 这个组件,然后传入一个数组,数组对象中,包含label标签,就是tab的标题。
在这里插入图片描述
可以绑定点击事件,onChange事件。

还可以添加样式
在这里插入图片描述
设置默认选中
在这里插入图片描述
在这里插入图片描述
tab切换的同时,主体也相应的切换。

下面说一下比较常见的主体滑动,tab同时切换,而且滑动的比例也相同,这样就是一个比较好的用户体验了。主要涉及到 cube-slide cube-slide-item 这两个组件。

在这里插入图片描述
要想完成这个效果,需要依赖于两个事件。
onScroll 和 onChange . onChange 事件用于绑定 tab切换,onScroll 事件主要是来计算滑动比例。
在这里插入图片描述
这个滑动比例的难点在比例的计算。必须要强调的一点是众多宽度、高度、坐标的意义的确定。先获取,设置的时候,还需取反,这是根据实际需求来的。

类似效果,其实swiper,等效果都可以实现。

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!