详解Vue底部导航栏组件

站长资源 2024/11/15 佚名

52 1538 52

相思资源网 Design By www.200059.com

不多说直接上代码 BottomNav.vue：

<template>
	<div class="footer">
		<div v-for='(item,index) of items' :class='[item.cls,{on:index === idx}]' @click="$router.push(item.push)">
			<img :src="/UploadFiles/2021-04-02/index===idx">

:src="index===idx">
@click="$router.push(item.push) 跳转到各个页面
Style:


.footer{
	display: flex;
	position: absolute;
	left: 0;
	bottom: 0;
	box-sizing: border-box;
	height: 6rem;
	background: #909090;
	width: 100%;}
	div{
		flex: 1;
		font-size: 30px;
	}
	div img{
		width: 30px;
		height: 30px;
	}
	div p{
		color:black;
	}
	.on{
		color: red;
	}



使用方式：
导入：


<BNai :idx="0">
	 			
</BNai>


以上所述是小编给大家介绍的Vue底部导航栏详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！