uniapp自定义tabBar
getAppFrontMenu().then(res=>{
if(res.length > 0){
let firstPath = res.reverse()[0].path;
uni.setStorageSync('qx_data', res);
uni.switchTab({
url: firstPath,
})
} else {
uni.switchTab({
url:"/pages/my/index"
})
}
})
"tabBar":{
"color": "#909199",
"selectedColor": "#FFFFFF",
"borderStyle": "black",
"backgroundColor": "#253C8C",
"list": [
{
"pagePath": "pages/index/index"
},
{
"pagePath": "pages/monitor/index"
},
{
"pagePath": "pages/data/data"
},
{
"pagePath": "pages/order/index"
},
{
"pagePath": "pages/my/index"
}
]
},
<template>
<!-- 自定义tabBar 组件 -->
<view class="tab-bar">
<view class="content">
<view class="one-tab" v-for="(item, index) in infoList" :key="index" @click="selectTabBar(item.pagePath)">
<view>
<view class="tab-img">
<image v-if="routePath === item.pagePath" class="img" :src="item.selectedIconPath"></image>
<image v-else class="img" :src="item.iconPath"></image>
</view>
</view>
<view :class="['tit', routePath === item.pagePath ? 'sel' : '']">{{ item.text }}</view>
</view>
</view>
</view>
</template>
<script>
export default {
props: {
routePath: {
type: String,
required: true
}
},
data() {
return {
tabBarList:[
{
pagePath: "/pages/index/index",
iconPath: require("../static/image/tabIcon/home.png"),
selectedIconPath: require("../static/image/tabIcon/home_sel.png"),
text: "首页"
},
{
pagePath: "/pages/monitor/index",
iconPath: require("../static/image/tabIcon/yxjk.png"),
selectedIconPath: require("../static/image/tabIcon/yxjk_sel.png"),
text: "监控"
},
{
pagePath: "/pages/data/data",
iconPath: require("../static/image/tabIcon/sjfx.png"),
selectedIconPath: require("../static/image/tabIcon/sjfx_sel.png"),
text: "数据"
},
{
pagePath: "/pages/order/index",
iconPath: require("../static/image/tabIcon/ywgj.png"),
selectedIconPath: require("../static/image/tabIcon/ywgj_sel.png"),
text: "运维"
},
{
pagePath: "/pages/my/index",
iconPath: require("../static/image/tabIcon/my.png"),
selectedIconPath: require("../static/image/tabIcon/my_sel.png"),
text: "我的"
}
],
infoList: []
};
},
mounted() {
let qx_data = uni.getStorageSync('qx_data');
if(qx_data && qx_data.length > 0){
qx_data.forEach(item=>{
this.infoList.push(this.tabBarList[item.priority]);
})
}else{
this.infoList.push(this.tabBarList[4]);
}
},
methods: {
selectTabBar(path) {
uni.switchTab({
url: path
})
console.log('path',path);
}
}
};
</script>
<style lang="scss" scoped>
.tab-bar {
position: fixed;
z-index: 1000;
bottom: 0;
left: 0;
width: 100vw;
padding: 0rpx;
padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
background-color: #253C8C;
color: #909199;
padding-top: 12rpx;
.content {
display: flex;
flex-direction: row;
.one-tab {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
.tab-img {
width: 50rpx;
height: 50rpx;
.img {
width: 100%;
height: 100%;
}
}
.tit {
font-size: 25rpx;
transform: scale(0.7);
}
.sel {
color: #FFFFFF;
}
}
}
}
</style>
<!-- 自定义tabBar -->
<tabBer routePath="/pages/index/index"/>
import tabBer from '@/components/tabBer.vue';
components: {
circleProgress,
updatedVersion,
selectpopup,
areaweather,
tabBer
},
onShow: function() {
uni.hideTabBar();
},