效果:
html:
<template>
<footer class="navigaion" >
<ul class="ul_nav">
<li class="li_nav" v-for="(item,index) in tabBar.list" :key="item.text"
:style='select==index? "color:"+tabBar.selectedColor : "color:"+tabBar.color' @click="clickIndex(index)">
<navigator :url="item.pagePath" open-type="redirect">
<img :src="select==index?item.selectedIconPath:item.iconPath" alt="">
<div class="nav_title">{{item.text}}</div>
</navigator>
</li>
</ul>
</footer>
</template>
js:
<script>
export default {
data: () => {
return {
select: global.app.currentMenu;
tabBar: {
color: "#a9b7b7", //未选择时 底部导航文字的颜色
selectedColor: "blue", //选择时 底部导航文字的颜色
borderStyle: "white", //底部导航边框的样色
backgroundColor:'#fff',
list: [
{
selectedIconPath: "/static/images/home1.png", //选中时 图标路径
iconPath: "/static/images/home.png", //未选择时 图标路径
pagePath: "pages/index/main", //页面访问地址
text: "发现"
},
{
selectedIconPath: "/static/images/read1.png",
iconPath: "/static/images/read.png",
pagePath: "pages/detail/main",
text: "阅读"
},
{
selectedIconPath: "/static/images/mine1.png",
iconPath: "/static/images/mine.png",
pagePath: "pages/setting/main",
text: "我的"
}
]
}
};
},
methods: {
clickIndex(i) {
// this.select = i;
this.select = global.app.currentMenu;
}
},
//用户退出页面时发生
onUnload() {
select: 0;
},
onShow() {
select: 0;
}
};
</script>
css:
<style scope>
.navigaion {
position: fixed;
z-index: 801;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100rpx;
background: #fff;
/* border-top: 1px solid #d9d9d9; */
}
.ul_nav {
height: 100rpx;
width: 100%;
display: flex;
}
.li_nav {
flex: 1;
height: 100%;
float: left;
width: 33%;
text-align: center;
list-style-type: none;
margin: 0px;
padding: 0px;
}
.li_nav a {
flex: 1;
height: 100%;
}
.li_nav img {
width: 60rpx;
height: 60rpx;
}
.nav_title {
font-size: 24rpx;
}
</style>