需求
自带的tabbar是无法做成圆角加阴影的,最后的解决方法只能是自定义tabbar。
实现
第一步:在page.json中定义两个tab的路径。
"tabBar": {
"blurEffect":"extralight",
"color": "#909399",
"selectedColor": "#18b566",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/list/list"
},
{
"pagePath": "pages/my/my"
}
]
},
第二步:在components中自定义一个tabbar的组件
<template>
<view class="tabbar" >
<view class="tabbar-item" v-for="(item,index) in list" :key="index" @click="changeTab(index)">
<image class="img" :src="item.selectedIconPath" v-if="current == index"></image>
<image class="img" :src="item.iconPath" v-else></image>
<view class="text active" v-if="current == index">{{item.text}}</view>
<view class="text" v-else>{{item.text}}</view>
</view>
</view>
</template>
<script>
export default {
name: "tabbar",
props: {
current: Number
},
created() {
uni.hideTabBar()
},
data() {
return {
list: [
{
selectedIconPath: "../../static/tabbar/list-active.png",
iconPath: "../../static/tabbar/list.png",
text: '列表',
pagePath: "pages/list/list"
},
{
selectedIconPath: "../../static/tabbar/my-active.png",
iconPath: "../../static/tabbar/my.png",
text: '我的',
pagePath: "pages/my/my"
}
],
}
},
methods: {
changeTab(e) {
uni.switchTab({
url: '/' + this.list[e].pagePath,
})
}
}
}
</script>
<style scoped>
.tabbar {
position: fixed;
left: 0;
bottom: 0;
z-index: 99;
width: 100%;
height: 150upx;
display: flex;
align-items: center;
justify-content: space-around;
background-image:url(../../static/tabbar/bg.png);
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 30rpx 0 0;
},
.tabbar-item {
padding: 0 40rpx;
}
.img {
height: 42upx;
width: 42upx;
}
.text {
font-size: 23upx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #CACACA;
line-height: 27upx;
}
.text.active {
color: #409EFE;
}
</style>
第三步:使用tabbar。
<!-- list页面 -->
<tabbar current="0"></tabbar>
<!-- my页面 -->
<tabbar current="1"></tabbar>
<script>
import tabbar from '@/components/tabbar/index'
components:{
tabbar
}
</script>
解析
进入页面就隐藏tabbar
created() {
uni.hideTabBar()
},
tabbar遮住正常页面,层级又不能高于遮罩层,设置层级99。
.tabbar {
position: fixed;
left: 0;
bottom: 0;
z-index: 99;
}