1、app.json里
"tabBar": {
"custom": true,
"color": "#000",
"selectedColor": "#ff6861",
"borderStyle": "black",
"backgroundColor": "#fff",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "/images/home.png",
"selectedIconPath": "/images/select-home.png"
},
{
"pagePath": "pages/pub/index",
"text": "发布"
},
{
"pagePath": "pages/mine/index",
"text": "我",
"iconPath": "/images/my.png",
"selectedIconPath": "/images/select-my.png"
}
]
},
app.js里存储菜单选中的是哪一个
globalData: {
selected: 0
}
2、最外层定义tabBar组件
3、自定义菜单栏组件样式
custom-tab-bar/index.wxml文件代码如下
<cover-view class="tab-bar" wx:if="{{selected!==1}}">
<cover-view class="tab-bar-border"></cover-view>
<cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-box" data-path="{{item.pagePath}}" data-index="{{index}}"
bindtap="switchTab">
<cover-image class="cov_img" wx:if="{{index !== 1}}" src="{{selected === index ? item.selectedIconPath : item.iconPath}}">
</cover-image>
<cover-view wx:if="{{index !== 1}}" style="color: {{selected === index ? selectedColor:color}}">{{item.text}}
</cover-view>
<cover-view wx:else="{{index === 1}}" class="center">+</cover-view>
</cover-view>
</cover-view>
custom-tab-bar/index.json文件代码如下
{
"component": true
}
custom-tab-bar/index.js文件代码如下
var app = getApp()
Component({
data: {
selected: 0,
color: "#ccc",
selectedColor: "#1296db",
list: [{
pagePath: "/pages/index/index",
iconPath: "/images/home.png",
text: "首页",
selectedIconPath: "/images/select-home.png",
id: 0
},
{
pagePath: "/pages/ pub/index",
text: "发布",
id: 1
},
{
pagePath: "/pages/mine/index",
iconPath: "/images/my.png",
text: "我",
selectedIconPath: "/images/select-my.png",
id: 2
}
]
},
ready: function () {
this.setData({
selected: app.globalData.selected
})
},
methods: {
switchTab(e) {
const data = e.currentTarget.dataset;
const url = data.path;
app.globalData.selected = data.index;
if(data.index===1){
wx.navigateTo({
url: '/pages/publish/index'
})
}else{
wx.switchTab({
url: url
})
}
}
}
})
custom-tab-bar/index.wxss文件代码如下
.tab-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 48px;
background: white;
display: flex;
padding-bottom: env(safe-area-inset-bottom);
}
.tab-bar-border {
background-color: rgba(0, 0, 0, 0.33);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 1px;
transform: scaleY(0.5);
}
.tab-bar-box {
flex: 1;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.tab-bar-box .cov_img {
width: 27px;
height: 27px;
}
.tab-bar-box{
font-size: 10px;
}
.center {
width: 48px;
height: 48px;
background-color: #1296db;
border-radius: 50%;
text-align: center;
line-height: 40px;
font-size: 50px!important;
color: #fff;
}