今天有研究了一下底部导航栏组件

同名公众号 - 人生代码

于 2019-01-28 22:13:28 发布

阅读量816

点赞数 1

CC 4.0 BY-SA版权

分类专栏： web前端 Vue3 + TS 进阶之路文章标签： vue底部导航栏组件

本文链接：https://blog.youkuaiyun.com/qq_36772866/article/details/86683557

Vue3 + TS 进阶之路同时被 2 个专栏收录

129 篇文章 ¥79.90 ¥99.00

订阅专栏

超级会员免费看

web前端

40 篇文章 ¥79.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了如何在Vue中实现一个自适应的底部导航栏组件。通过使用CSS3的display:flex实现伸缩盒子模型，解决路由嵌套问题，并探讨了使用iconfont图标或图片的选择。最后展示了组件的最终效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个想法源于最近自己在开发一个移动端博客的一个底部导航栏，原型设计如下：
在这里插入图片描述
我们来分析一下这个导航栏，其实很简单啦，就是自适应固定在底部
我们可以使用CSS3属性display:flex设置父级盒子为伸缩盒子模型，子元素设置flex:1自适应大小。

html布局如下

<template>
	<div class="footer">
		<div v-for='(item,index) of items' :key="index" :class='[item.cls,{on:index === idx}]' @click="change(item,index)">
			<img :src="index===idx?item.srcSelect:item.src" v-if="showIconOrSrc">
			<i :class="index===idx?item.iconSelect:item.icon" v-if="!showIconOrSrc"></i>
			<span :class="['colorChange',{on:index===idx}]" >{
  
  {item.name}}</span>
		</div>
	</div>
</template>

样式如下：

了解本专栏

超级会员免费看