小程序自定义底部tabbar，并且解决遮罩层无法遮挡住底部tabbar问题

devtools/2025/1/15 12:17:03/

一、根目录下新建文件夹
在这里插入图片描述
二、index.wxml

<view><van-tabbar active="{{ active }}" active-color="#f2be8f" bind:change="onChange"><van-tabbar-item wx:for="{{list}}" wx:key="index" info="{{item.info? item.info:''}}"><image slot="icon" src="{{item.iconPath}}" mode="aspectFit" style="width: 50rpx;height: 50rpx;"/><image slot="icon-active" src="{{item.selectedIconPath}}" mode="aspectFit" style="width: 50rpx;height: 50rpx;"/>{{item.text}}</van-tabbar-item></van-tabbar>
</view>

三、index.json

{"component": true,"usingComponents": {"van-tabbar": "@vant/weapp/tabbar/index","van-tabbar-item": "@vant/weapp/tabbar-item/index"}
}

四、index.js

// custom-tab-bar/index.js
import {menuData
} from './data'
Component({/*** 组件的属性列表*/options: {// 开启这个才可以修改vant组件里面的样式styleIsolation: 'shared'},properties: {},/*** 组件的初始数据*/data: {active: null,list: menuData},/*** 组件的方法列表*/methods: {// 切换tabbar页面onChange(event) {this.setData({active:event.detail})wx.switchTab({url: this.data.list[event.detail].pagePath,})}}
})

五、data.js

export const menuData = [{"pagePath": "/pages/index/index","text": "首页","iconPath": "/assets/images/tabbar/index.png","selectedIconPath": '/assets/images/tabbar/index-select.png'},{"pagePath": "/pages/order/order","text": "点单","iconPath": "/assets/images/tabbar/order.png","selectedIconPath": '/assets/images/tabbar/order-select.png'},{"pagePath": "/pages/record/record","text": "订单","iconPath": "/assets/images/tabbar/record.png","selectedIconPath": '/assets/images/tabbar/record-select.png'},{"pagePath": "/pages/my/my","text": "我的","iconPath": "/assets/images/tabbar/my.png","selectedIconPath": '/assets/images/tabbar/my-select.png'}
]

六、app.json

"tabBar": {"custom": true, // 重点，其他的该怎么写怎么写，表示开启自定义tabbar"color": "#666666","selectedColor": "#FF5F15","backgroundColor": "#ffffff","borderStyle": "black","list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "assets/images/tabbar/index.png","selectedIconPath": "assets/images/tabbar/index-select.png"},{"pagePath": "pages/order/order","text": "点单","iconPath": "assets/images/tabbar/order.png","selectedIconPath": "assets/images/tabbar/order-select.png"},{"pagePath": "pages/record/record","text": "订单","iconPath": "assets/images/tabbar/record.png","selectedIconPath": "assets/images/tabbar/record-select.png"},{"pagePath": "pages/my/my","text": "我的","iconPath": "assets/images/tabbar/my.png","selectedIconPath": "assets/images/tabbar/my-select.png"}]},