前段时间写了一个移动端的自适应滑动Vue导航栏组件,觉得有一定实用性,大家可能会用得到(当然有些大佬自己写得更好的话就没必要啦),于是前两天整理了一下,目前已经发布到npm和GitHub上了,点我到npm,点我到GitHub项目 ,有需要的同学可以在项目中 npm install ly-tab -S
或者 yarn add ly-tab
使用,具体用法下面会讲到。
好了,先看看效果吧
好的,开始废话了,实习差不多3个月了,这段时间跟着导师大佬也有接触过一些项目,也学到了不少东西,接触到的项目基本都是移动端项目,而且框架主要用的是Vue。做过移动端或者用过移动端APP(呸,屁话)的同学肯定会发现很多时候都会有类似上面这种有滑动效果的tab导航栏,相信大家肯定在掘金的首页就看到过。
实现思路
当时的项目中恰好也有这种需求,于是我想偷个懒直接使用 Mint-ui 组件库里现成的tabbar和tab-item组件,github上看了下它的实现源码发现只实现了切换功能但不能滑动,so,懒偷不了就只好自己写咯。
其实单单实现tab切换功能是不难的,看mint-ui使用的其实是v-model语法糖,就像下面这样
<ly-tab v-model="selected"> <ly-tab-item></ly-tab-item> </ly-tab>
下面是拆解v-model语法糖的实现
<ly-tab :value="selected" @input="selected = arguments[0]"> <ly-tab-item></ly-tab-item> </ly-tab>
然后只需要在tab-item组件内实现当自己被点击时,让其父组件也就是ly-tab组件 $emit 一个 input 事件,并传入一个标识每个tab-item的唯一值作为第一个参数,关于这个唯一值,mint-ui的做法需要用户自己手动给每个tab-item通过props传入一个唯一的id值,如下为Mint UI的Demo实现:
<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,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
更新日志
- 纯音入心系列纯音乐《天籁古筝》1CD[MP3][331MB]
- 男女对唱典藏天碟《发烧对唱·那个季节里的歌DSD》10CD[WAV]
- 群星2010-歌林精选辑[歌林][WAV+CUE]
- TrioZimbalist-PianoTriosofWeinberg,Auerbach,Dvorak(2024)[24-44,1]wav
- 群星.1992-滚石第一流台湾歌·12王牌大车拼【滚石】【WAV+CUE】
- 林子祥.1984-创作歌集【华纳】【WAV+CUE】
- 周汤豪.2010-周汤豪【华纳】【FLAC分轨】
- Mozart-TheStringQuintets-AmadeusQuartet,CecilAronowitz(2017)[24-44,1][WAV+CUE]
- JamesWilliamsDennisIrwin-Focus(2024,Red)[24-48]FLAC
- 藤泽麻衣《空みあげて》[WAV]
- 纯音入心系列纯音乐《中国古筝经典名曲》1CD[MP3][1.3GB]
- 纯音入心系列纯音乐《古筝新奏:岁月静好与筝语,细水流年与筝同》1CD[MP3][846.9MB]
- 670《脆弱敏感小女生》[320K/MP3][27.53MB]
- 曾琳.2011-好好爱我【南方】【WAV+CUE】
- 范晓萱.1995-RAIN【福茂】【WAV+CUE】