使用场景:在一个非tabbar页面,想要有底部导航效果,故自定义效果,系统原底部导航栏仍在正常使用
效果:
布局:
html
<template>
<view class="tab-bar" :style="{height: height + 'px'}">
<view v-for="(item, index) in tabBars" :key="index" @click="switchTab(item)"
:style="{color: index === selectIndex ? item.selectedTextColor : item.textColor}">
<view style="display: flex; justify-content: center;">
<image :src="index === selectIndex ? item.selectedIconPath : item.iconPath" style="height: 25px; width: 25px;"></image>
</view>
<view style="margin-top: 2px; font-size: 12px;">
{{item.text}}
</view>
</view>
</view>
</template>
<script>
export default {
name:"tabBar",
props: {
tabBars: {
type: Array,
required: true
},
selectIndex: {
type: Number,
default: 0
}
},
data() {
return {
height: undefined
};
},
methods: {
switchTab(item) {
if (this.getCurrentPageIndex() !== item.pagePath) {
uni.redirectTo({
url: item.pagePath
});
}
},
getCurrentPageIndex() {
const pages = getCurrentPages();
return pages[pages.length - 1].route;
}
},
mounted() {
let systemInfo = uni.getSystemInfoSync();
let tabBarHeight = systemInfo.screenHeight - systemInfo.windowHeight - systemInfo.statusBarHeight;
this.height = tabBarHeight
}
}
</script>
<style>
.tab-bar {
display: flex;
justify-content: space-around;
position: fixed;
height: 5vh;
bottom: 0;
width: 100%;
background-color: #fbfcfe;
border-top: 1px solid rgba(0, 0, 0, 0.1);
padding-top: 3px;
padding-bottom: 2px;
}
</style>
使用:
html
<tabBar :tab-bars="approvalTabbar" :selectIndex="1"></tabBar>
// selectIndex 是当前页面的数组下标
approvalTabbar = [
{
iconPath: '/static/icon/mess.png',
selectedIconPath:'/static/icon/mess-selected.png',
text: "发起申请",
pagePath:'/pages/approval/launch/launch',
textColor: tabTextColor,
selectedTextColor: tabSelectedTextColor
},
{
iconPath: '/static/icon/approval-mine.png',
selectedIconPath:'/static/icon/approval-mine-selected.png',
text: "我审批的",
pagePath:'/pages/approval/accraditation/accraditation',
textColor: tabTextColor,
selectedTextColor: tabSelectedTextColor
},
{
iconPath: '/static/icon/submit.png',
selectedIconPath:'/static/icon/submit-selected.png',
text: "已提交",
pagePath:'/pages/approval/submit/submit',
textColor: tabTextColor,
selectedTextColor: tabSelectedTextColor
}
]
不足之处:
1.需要在参与跳转的每个页面引入组件
2.引入时需要传递相同的tabs数组数据、页面与数组对应的下标
3.页面跳转后会重绘底部导航栏,出现闪的问题