站长资源网络编程
详解Vue底部导航栏组件
简介不多说直接上代码 BottomNav.vue：
不多说直接上代码 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底部导航栏详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！