写一个移动端惯性滑动&回弹Vue导航栏组件 ly-tab

<ly-tab v-model="selected">
  <ly-tab-item></ly-tab-item>
</ly-tab>

<ly-tab :value="selected" @input="selected = arguments[0]">
  <ly-tab-item></ly-tab-item>
</ly-tab>

<mt-tabbar v-model="selected">
  <mt-tab-item id="订单">
    <img slot="icon" src="/UploadFiles/2021-04-02/100x100">

但是，在看过大佬的 vue当中设计Tabbar插件时的思考 后觉得文章中的那种做法会更好一点，因为对于父组件 <ly-tab/> 来说，只要知道点击的是哪个 <ly-tab-item/> 就行了啊，那么我把每个 <ly-tab-item/> 组件的 index 索引值作为它的唯一标识值不就行了吗。
那么问题来了：怎么在tab-item组件内部取到自己的 index 值呢"htmlcode">

<template>
 <a class="ly-tab-item"
    :style="$parent.value === id "
    @click="$parent.$emit('input', id)">
  <div class="ly-tab-item-icon"><slot name="icon"></slot></div>
  <div class="ly-tab-item-label"><slot></slot></div>
 </a>
</template>
<script>
export default {
 name: 'LyTabItem',
 computed: {
  activeStyle () {
   return {
    color: this.$parent.activeColor,
    borderColor: this.$parent.activeColor,
    borderWidth: this.$parent.lineWidth,
    borderBottomStyle: 'solid'
   }
  }
 },
 data () {
  return {
   id: (this.$parent.$children.length || 1) - 1
  }
 }
}
</script>
<style lang="scss">
.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;
 }
}
</style>


关于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);


之后你就可以在你项目中任意使用 <ly-tab></ly-tab> 和 <ly-tab-item></ly-tab-item> 组件而不需要再次引入了
栗子


<ly-tab v-model="selected" fixBottom>
 <!-- selected是你自己定义的一个在data中用于存放当前tab-item的索引值的变量 -->
 <ly-tab-item v-for="(item, index) in tabList" :key="index">
  {{item.itemName}}
 </ly-tab-item>
</ly-tab>


上面的栗子其实只是tabbar的实现，大家项目中肯定还需要做视图区的切换，在这里简单说一下我目前的做法：

  
使用Vue-router做router-view的切换
  
使用动态组件（可以配合异步组件使用）

我暂时的话好像只用过这两种，不知道大家还有其他什么更好的方法，欢迎分享~
配置项
可以给 <ly-tab></ly-tab> 组件传入一些配置项以自定义你想要的效果


  
    
      配置项
      类型
      描述
      默认值
    
  
  
    
      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导航栏组件 ly-tab，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！