pages.json
"tabBar": {
"custom": true,
"color": "#333",
"selectedColor": "#FF0036",
"backgroundColor": "rgba(0,0,0,0)",
"borderStyle": "black",
"list": [{
"pagePath": "pages/index/index"
},
{
"pagePath": "pages/index2/index"
},
{
"pagePath": "pages/index3/index"
},
{
"pagePath": "pages/index4/index"
},
{
"pagePath": "pages/index5/index"
}
]
}
bottom-nav.vue
<template>
<view>
<view class="tab-bar over-max-width">
<view class="item" v-for="(item, index) in list" :key="index" @click="redirectTo(item.wap_url)">
<view class="bd">
<block v-if="transactionUrl == item.wap_url">
<view class="img" >
<image :src="item.selectedIconPath" mode="widthFix" />
<view class="text font-size-center-11"
:style="{ color: verify(item.wap_url) ? '#EED4AF' : '#CCCCCC' }">{{item.text}}</view>
</view>
</block>
<block v-else>
<view class="icon">
<block v-if="verify(item.wap_url)">
<image :style="item.selectedStyle" :src="item.selectedIconPath"
mode="widthFix" />
</block>
<block v-else>
<image :style="item.iconStyle" :src="item.iconPath" mode="widthFix" />
</block>
</view>
<view class="label font-size-center-11"
:style="{ color: verify(item.wap_url) ? '#EED4AF' : '#CCCCCC' }">
{{ item.text }}
</view>
<view class="flex-center" style="height: 18rpx;">
<image class="shadow" :src="选中阴影" mode="widthFix"
v-if="verify(item.wap_url)"></image>
</view>
</block>
</view>
</view>
</view>
<!-- 解决fixed定位后底部导航栏塌陷问题 -->
<view class="tab-bar-placeholder"></view>
</view>
</template>
<script>
export default {
props: {
value: {
type: Object
},
name: {
type: String,
default: ''
}
},
watch: {
name(newValue, oldValue) {}
},
data() {
return {
transactionUrl: '/pages/index3/index',
currentRoute: '', //当前页面路径
list: [{
text: 'tabbar1',
wap_url: '/pages/index/index',
iconPath: '', // 未选中图标
iconStyle: "width:44rpx;height:52rpx", // 未选中样式
selectedIconPath: '', // 选中图标
selectedStyle: "width:48rpx;height:58rpx" // 选中样式
}, {
text: 'tabbar2',
wap_url: '/pages/index2/index',
iconPath: '',
iconStyle: "width:60rpx;height:52rpx",
selectedIconPath: '',
selectedStyle: "width:62rpx;height:54rpx"
},
{
text: 'tabbar3',
wap_url: '/pages/index3/index',
iconPath: '',
iconStyle: "",
selectedIconPath: '',
selectedStyle: ""
},
{
text: 'tabbar4',
wap_url:'/pages/index4/index',
iconPath: '',
iconStyle: "width:48rpx;height:44rpx",
selectedIconPath: '',
selectedStyle: "width:60rpx;height:54rpx"
},
{
text: 'tabbar5',
wap_url: '/pages/index5/index'
iconPath: '',
iconStyle: "width:48rpx;height:54rpx",
selectedIconPath: '',
selectedStyle: "width:52rpx;height:58rpx"
}
]
};
},
mounted() {
// 隐藏原生tabbar
uni.hideTabBar();
let currentPage = getCurrentPages()[getCurrentPages().length - 1];
this.currentRoute = currentPage.route;
},
methods: {
redirectTo(link) {
this.$util.redirectTo(link)
},
verify(link) {
if (link == null || link == '' || !link) return false;
if (this.name) {
var url = this.currentRoute + '?name=' + this.name;
} else {
var url = this.currentRoute;
}
// 首页特殊处理
if (link == '/pages/index/index' && this.name == 'DIY_VIEW_INDEX') {
return true;
} else if (link.indexOf(url) != -1) {
return true;
}
return false;
}
}
};
</script>
<style lang="scss">
.placeholder {
height: 132rpx;
&.bluge {
height: 180rpx;
}
}
.safe-area {
padding-bottom: 0;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
.tab-bar {
height: 132rpx;
box-sizing: border-box;
position: fixed;
--window-left: 0;
bottom: 0;
width: 100%;
z-index: 998;
display: flex;
padding-bottom: 0;
// padding-bottom: constant(safe-area-inset-bottom);
// padding-bottom: env(safe-area-inset-bottom);
background: #BAB1A0;
.item {
display: flex;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex: 1;
flex-direction: column;
padding-bottom: 10rpx;
box-sizing: border-box;
position: relative;
.bd {
position: relative;
height: 132rpx;
flex-direction: column;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.img {
position: relative;
top: -20rpx;
display: inline-block;
width: 120rpx;
height: 122rpx;
image {
width: 100%;
height: 100%;
}
.text {
position: relative;
top: -50rpx;
}
}
.icon {
position: relative;
display: inline-block;
height: 58rpx;
margin-top: 30rpx;
image {
width: 100%;
height: 100%;
}
>view {
height: inherit;
display: flex;
align-items: center;
}
.bar-icon {
font-size: 42rpx;
}
}
.label {
position: relative;
text-align: center;
line-height: 1;
}
.shadow {
width: 112rpx;
}
}
.tag {
position: absolute;
top: 20rpx;
background: #6C1015;
border-radius: 20rpx;
font-weight: 400;
color: #FFFFFF;
font-size: 24rpx;
line-height: 1;
padding: 8rpx 15rpx;
}
}
}
.tab-bar-placeholder {
padding-bottom: calc(constant(safe-area-inset-bottom) + 112rpx);
padding-bottom: calc(env(safe-area-inset-bottom) + 112rpx);
}
</style>
引入
首页
<bottom-nav name="DIY_VIEW_INDEX"></bottom-nav>
其他
<bottom-nav></bottom-nav>
效果图：
