【uni-app】tabbar自定义

需求

自带的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的组件

{{item.text}}{{item.text}} 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,})}}} .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;}

第三步：使用tabbar。

import tabbar from '@/components/tabbar/index'components:{tabbar}

解析

进入页面就隐藏tabbar

created() {uni.hideTabBar() },

tabbar遮住正常页面，层级又不能高于遮罩层，设置层级99。

.tabbar {position: fixed;left: 0;bottom: 0;z-index: 99;}