步骤
1.配置项目app.json里面tabBar属性:注意(tabBar.custom :true)
(即便是自定义tabBar,也需要去app.json里进行配置文件的声明,
也就是iconPath、pagePath、selectedIconPath、text这些。)
2.编写自己的custom-tab-bar组件:json,js(ts),wxml,wxss
(渲染tabBar)
3.每个页面加上getTabBar去控制选中的突破颜色字体变化
注意(tabBar.custom :true)
不想改配置就要注意文件夹名称和位置:与components,pages同级,命名必须custon-tab-bar
// app.json 替换tabBar属性,如果已经根据微信自带的写好了tabBar,直接改custom=true即可
"tabBar": {
"custom": true,
"color": "#666666",
"selectedColor": "#63c00d",
"backgroundColor": "#ffffff",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/charger/home/home",
"text": "首页",
"iconPath": "/images/icon/home.png",
"selectedIconPath": "/images/icon/home_select.png"
},
{
"pagePath": "pages/charger/message/message",
"text": "消息",
"iconPath": "/images/icon/message.png",
"selectedIconPath": "/images/icon/message_select.png"
},
{
"pagePath": "pages/charger/order/order",
"text": "订单",
"iconPath": "/images/icon/order.png",
"selectedIconPath": "/images/icon/order_select.png"
},
{
"pagePath": "pages/charger/user/user",
"text": "我的",
"iconPath": "/images/icon/user.png",
"selectedIconPath": "/images/icon/user_select.png"
}
]
},
## index.json
{
"component": true,
"usingComponents": {}
}
// index.js(ts)
Component({
data: {
select: 0,
list: [
{
"pagePath": "../home/home",
"text": "首页",
"iconPath": "../images/icon/home.png",
"selectedIconPath": "../images/icon/home_select.png",
type: 0
},
{
"pagePath": "../message/message",
"text": "消息",
"iconPath": "../images/icon/message.png",
"selectedIconPath": "../images/icon/message_select.png",
type: 0
},
{
type: 1,
},
{
"pagePath": "../order/order",
"text": "订单",
"iconPath": "../images/icon/order.png",
"selectedIconPath": "../images/icon/order_select.png",
type: 0
},
{
"pagePath": "../user/user",
"text": "我的",
"iconPath": "../images/icon/user.png",
"selectedIconPath": "../images/icon/user_select.png",
type: 0
}
]
},
methods: {
selectPage(e) {
const { index, page, type } = e.currentTarget.dataset;
console.log("ee", e)
if (index !== this.data.select && type === 0) {
wx.switchTab({
url: page,
})
}
},
/**
* 扫码
*/
scan() {
wx.scanCode({
success: (res) => {
wx.navigateTo({
url: res.result
})
},
fail: (res) => {
console.log(res);
}
})
},
}
})
{{ item.text }}
扫一扫
/* index.wxss */
.tabbar {
width: 100%;
display: flex;
background-color: #fff;
position: fixed;
bottom: 0;
padding-bottom: env(safe-area-inset-bottom);
padding-top: 10rpx;
z-index: 9999;
}
.tabbar-item {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.tabbar-item .tabbar-img {
width: 50rpx;
height: 50rpx;
}
.tabbar-item .fontText {
font-size: 26rpx;
margin-top: 10rpx;
}
.tabbar-item .publish {
width: 65rpx;
height: 65rpx;
font-size: 26rpx;
background-color: #10B981;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: auto;
}
.tabbar-select {
color: #10B981;
}
// home.js(ts)
onShow(){
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
this.getTabBar().setData({
select: 0
})
}
}
// user.js(ts)
onShow(){
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
this.getTabBar().setData({
select: 1
})
}
}
最后