<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，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: