如何写移动端惯性滑动或回弹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 是一个数组，由于每个 组件是依次创建并通过push的方式插入该数组，所以在每个 组件创建并push到 $children 时，对于 组件来说 (this.$parent.$children.length || 1) - 1 不就是每个 组件唯一的 index 值了啊。实际上，到这里点击切换的功能就已经可以实现了。下面贴上tab-item.vue中的代码：

tab-item.vue

.ly-tab-item {
 text-decoration: none;
 text-align: center;
 .ly-tab-item-icon {
  margin: 0 auto 5px;
 }
 .ly-tab-item-label {
  margin: 0 auto 10px;
  line-height: 18px;
 }
}

关于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://6mz.cn/article/pcohos.html