(1): 在app.json配置如下,主要是custon配置和usingComponents
"tabBar": {
"custom": true,
"color": "#999999",
"selectedColor": "#000000",
"borderStyle": "black",
"backgroundColor": "#FFFFFF",
"list": [
{
"pagePath": "pages/index/index",
"iconPath": "static/tabbar/tab-home.png",
"selectedIconPath": "static/tabbar/tab-home-sel.png",
"text": "首页"
},
{
"pagePath": "pages/hot/hot",
"iconPath": "static/tabbar/tab-hot.png",
"selectedIconPath": "static/tabbar/tab-hot-sel.png",
"text": "今日爆款"
},
{
"pagePath": "pages/cart/cart",
"iconPath": "static/tabbar/tab-cart.png",
"selectedIconPath": "static/tabbar/tab-cart-sel.png",
"text": "购物车"
},
{
"pagePath": "pages/mine/mine",
"iconPath": "static/tabbar/tab-mine.png",
"selectedIconPath": "static/tabbar/tab-mine-sel.png",
"text": "我的"
}
]
},
"usingComponents": {}
(2): 新建custom-tab-bar组件(根目录下)
Component({
data: {
'selected': 0,
'color': "#ccc",
"selectedColor": "#000000",
"list": [
{
"pagePath": "/pages/index/index",
"iconPath": "/static/tabbar/tab-home.png",
"selectedIconPath": "/static/tabbar/tab-home-sel.png",
"text": "首页"
},
{
"pagePath": "/pages/hot/hot",
"iconPath": "/static/tabbar/tab-hot.png",
"selectedIconPath": "/static/tabbar/tab-hot-sel.png",
"text": "今日爆款"
},
{
"pagePath": "/pages/cart/cart",
"iconPath": "/static/tabbar/tab-cart.png",
"selectedIconPath": "/static/tabbar/tab-cart-sel.png",
"text": "购物车"
},
{
"pagePath": "/pages/mine/mine",
"iconPath": "/static/tabbar/tab-mine.png",
"selectedIconPath": "/static/tabbar/tab-mine-sel.png",
"text": "我的"
}
]
},
attached() {
},
methods: {
switchTab(e) {
const data = e.currentTarget.dataset
const url = data.path
wx.switchTab({url})
// this.setData({
// selected: data.index
// })
}
}
})
{
"component": true
}
<cover-view class="tab-bar">
<cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
<cover-image class='tab-bar-img' src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
<cover-view class="tab-bar-text" style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
</cover-view>
</cover-view>
/* custom-tab-bar/index.wxss */
.tab-bar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 50px;
display: flex;
justify-content: space-around;
background-color: #eef0f4;
padding-bottom: env(safe-area-inset-bottom);
}
.tab-bar-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.tab-bar-img {
width: 24px;
height: 24px;
margin-bottom: 2px;
}
.tab-bar-text{
font-size: 10px;
}
.selectedColor {
color: #f60;
}
(3) 在每个tabbar中的onShow中配置
onShow() {
// 页面显示
if (typeof this.getTabBar === 'function' &&
this.getTabBar()) {
this.getTabBar().setData({
selected: 0, // 对应当前页面在tabbar--list中的索引 0 1 2 3(代表四个tabbar)
show: true
})
}
},
显示如下,但是有个问题就是页面第一次切换,会闪动一下,也不知道怎么解决,希望大佬给个提示
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/a1c550955333da7a125cdbda11c3176b.png)