如何写移动端惯性滑动或回弹Vue导航栏组件
本篇文章为大家展示了如何写移动端惯性滑动或回弹Vue导航栏组件,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
成都创新互联公司是一家朝气蓬勃的网站建设公司。公司专注于为企业提供信息化建设解决方案。从事网站开发,网站制作,网站设计,网站模板,微信公众号开发,软件开发,成都小程序开发,10年建站对成都水电改造等多个领域,拥有丰富的网站推广经验。
先看效果
好的,开始废话了,实习差不多3个月了,这段时间跟着导师大佬也有接触过一些项目,也学到了不少东西,接触到的项目基本都是移动端项目,而且框架主要用的是Vue。做过移动端或者用过移动端APP(呸,屁话)的同学肯定会发现很多时候都会有类似上面这种有滑动效果的tab导航栏,相信大家肯定在掘金的首页就看到过。
实现思路
当时的项目中恰好也有这种需求,于是我想偷个懒直接使用 Mint-ui 组件库里现成的tabbar和tab-item组件,github上看了下它的实现源码发现只实现了切换功能但不能滑动,so,懒偷不了就只好自己写咯。
其实单单实现tab切换功能是不难的,看mint-ui使用的其实是v-model语法糖,就像下面这样
下面是拆解v-model语法糖的实现
然后只需要在tab-item组件内实现当自己被点击时,让其父组件也就是ly-tab组件 $emit 一个 input 事件,并传入一个标识每个tab-item的唯一值作为第一个参数,关于这个唯一值,mint-ui的做法需要用户自己手动给每个tab-item通过props传入一个唯一的id值,如下为Mint UI的Demo实现:
订单
但是,在看过大佬的 vue当中设计Tabbar插件时的思考 后觉得文章中的那种做法会更好一点,因为对于父组件
就行了啊,那么我把每个
组件的 index 索引值作为它的唯一标识值不就行了吗。
那么问题来了:怎么在tab-item组件内部取到自己的 index 值呢?
首先ly-tab组件的 $children
是一个数组,由于每个 $children
时,对于 (this.$parent.$children.length || 1) - 1
不就是每个
组件唯一的 index 值了啊。实际上,到这里点击切换的功能就已经可以实现了。下面贴上tab-item.vue中的代码:
tab-item.vue
关于tab.vue中触摸滑动、惯性滑动以及回弹等效果实现在这里就没办法详细讲了,有兴趣的小伙伴可以到github上查看, 点我去github查看项目 ,如果想看示例demo可以clone项目到本地跑一跑,写得不好的地方欢迎大家指正,如果觉得用得着或者能够帮到大家的话最好了,那也不妨点个star吧,哈哈......
哎哎哎,不对不对,怎么就开始求star了,最重要的还没讲呢—— ly-tab怎么使用呢?
如何使用 ly-tab
小伙伴们如果想使用ly-tab,需要在你的项目中通过npm或者yarn下载安装:
npm install ly-tab -S or yarn add ly-tab
接着在main.js中全局引入:
import Vue from 'vue'; import LyTab from 'ly-tab'; Vue.use(LyTab);
之后你就可以在你项目中任意使用
和
组件而不需要再次引入了
栗子
{{item.itemName}}
上面的栗子其实只是tabbar的实现,大家项目中肯定还需要做视图区的切换,在这里简单说一下我目前的做法:
使用Vue-router做router-view的切换
使用动态组件(可以配合异步组件使用)
我暂时的话好像只用过这两种,不知道大家还有其他什么更好的方法,欢迎分享~
配置项
可以给
组件传入一些配置项以自定义你想要的效果
配置项 | 类型 | 描述 | 默认值 |
---|---|---|---|
lineWidth | Number | fixBottom为false时tabbar底部border-width | 1px |
activeColor | String | 激活状态下字体color以及border-bottom-color | red |
fixBottom | Boolean | 是否固定在视图底部(为false时不可滑动) | false |
additionalX | Number | 近似等于超出边界时最大可拖动距离 | 50px |
reBoundExponent | Number | 惯性回弹指数(值越大,幅度越大,惯性回弹距离越长) | 10 |
sensitivity | Number | 惯性滑动时的灵敏度(值越小,阻力越大),可近似认为手松开后速度减为零所需时间 | 1000ms |
reBoundingDuration | Number | 回弹动画duration | 360ms |
上述内容就是如何写移动端惯性滑动或回弹Vue导航栏组件,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联行业资讯频道。
当前名称:如何写移动端惯性滑动或回弹Vue导航栏组件
网页地址:http://pwwzsj.com/article/pcohos.html