1.在app.json文件中，添加自定义tabbar配置："custom": true
"tabBar": {"custom": true,"backgroundColor": "#fafafa","borderStyle": "white","selectedColor": "#40ae36", "color": "#666","list": [{"pagePath": "pages/index/index","iconPath": "static/images/home.png","selectedIconPath": "static/images/home@selected.png","text": "首页"},{"pagePath": "pages/adoptProduct/adoptProduct","iconPath": "static/images/adopt.png","selectedIconPath": "static/images/adopt@selected.png","text": "认养"},{"pagePath": "pages/supermarket/supermarket","iconPath": "static/images/supermarket.png","selectedIconPath": "static/images/supermarket@selected.png","text": "农副超市"}, {"pagePath": "pages/ucenter/index/index","iconPath": "static/images/my.png","selectedIconPath": "static/images/my@selected.png","text": "我的"}]}2.新建根目录文件
index.wxml
<view class="tabBar"><view class="cont"><block wx:for="{{tabBar.list}}" wx:key="index" class="cont-item"><view data-path="{{item.pagePath}}" data-index="{{item.pagePath}}" bindtap="switchTab" class="{{item.search?'search':'item'}} {{tabIndex === index ? 'on' : 'off'}}"><image src="{{tabIndex === index ? item.selectedIconPath : item.iconPath}}"></image><view class="txt {{tabIndex === index ? 'selectedColor' : ''}}">{{item.text}}</view></view></block></view>
</view>index.wxss
.tabBar {z-index: 100;width: 100%;position: fixed;bottom: 0;font-size: 28rpx;background-color: #fff;color: #636363;
}
.cont {z-index: 0;height: calc(100rpx + env(safe-area-inset-bottom) / 2);padding-bottom: calc(env(safe-area-inset-bottom) / 2); padding-bottom: 30rpx;display: flex;justify-content: space-around;
}
.cont .item {font-size: 24rpx;position: relative;width: 15%;text-align: center;padding: 0;display: block;height: auto;line-height: 1;margin: 0;background-color: inherit;overflow: initial;justify-content: center;align-items: center;padding-top: 20rpx;
}
.cont .item image {width: 50rpx !important;height: 50rpx !important;margin: auto
}
.cont .selectedColor {color: #40ae36;
}
.txt{font-size: 24rpx;
}index.js
//获取应用实例
const app = getApp();
Component({data: {},methods: {switchTab(e) { const data = e.currentTarget.datasetconst url = data.pathwx.switchTab({url})}}
})index.json
{ "component": true,"usingComponents": {}
}3.在utils添加tab-service.js(通过接口请求，去判断显示那个tabbar)
let tabData = {tabIndex: 0,//底部按钮高亮下标tabBar: {custom: true,color: "#5F5F5F",selectedColor: "#07c160",backgroundColor: "#F7F7F7",list: []}
}// 更新菜单
const updateRole = (that, type) => {if (type === '0') {tabData.tabBar.list=[{pagePath: "/pages/index/index",iconPath: "/static/images/home.png",selectedIconPath: "/static/images/home@selected.png",text: "首页"},{pagePath: "/pages/adoptProduct/adoptProduct",iconPath: "/static/images/adopt.png",selectedIconPath: "/static/images/adopt@selected.png",text: "认养"},{pagePath: "/pages/supermarket/supermarket",iconPath: "/static/images/supermarket.png",selectedIconPath: "/static/images/supermarket@selected.png",text: "农副超市"}, {pagePath: "/pages/ucenter/index/index",iconPath: "/static/images/my.png",selectedIconPath: "/static/images/my@selected.png",text: "我的"}]}else if (type === '1'){tabData.tabBar.list= [{pagePath: "/pages/index/index",iconPath: "/static/images/home.png",selectedIconPath: "/static/images/home@selected.png",text: "首页"},{pagePath: "/pages/supermarket/supermarket",iconPath: "/static/images/supermarket.png",selectedIconPath: "/static/images/supermarket@selected.png",text: "农副超市"}, {pagePath: "/pages/ucenter/index/index",iconPath: "/static/images/my.png",selectedIconPath: "/static/images/my@selected.png",text: "我的"}]} updateTab(that);
}// 更新底部高亮
const updateIndex = (that, index) => {tabData.tabIndex = index;updateTab(that);
}// 更新Tab状态
const updateTab = (that) => {if (typeof that.getTabBar === 'function' && that.getTabBar()) {that.getTabBar().setData(tabData);}
}// 将可调用的方法抛出让外面调用
module.exports = {updateRole, updateTab, updateIndex,tabBar:tabData.tabBar.list
}4.在tabbar对应界面添加
tabService.updateRole(this,'0') // 显示所有tabbar4个
tabService.updateRole(this,'1') // 显示tabbar中的3个
tabService.updateIndex(this, 0) // tabbar高亮首页中的index.js
onShow(){ this.chooseMenu()tabService.updateIndex(this, 0) // tabbar高亮}chooseMenu(){util.request(api.chooseMenu, {}, 'GET').then(res => {if (res.errno === 0) {if(res.data == 1 ) {tabService.updateRole(this,'1')}else {tabService.updateRole(this,'0')}}else{util.showErrorToast(res.errmsg);}})}我的页面中的index.js
onShow(){ this.chooseMenu()tabService.updateIndex(this, 0) // tabbar高亮}chooseMenu(){util.request(api.chooseMenu, {}, 'GET').then(res => {if (res.errno === 0) {if(res.data == 1 ) {tabService.updateRole(this,'1')tabService.updateIndex(this, 2) //由于tabService.updateRole(this,'1')为1，所有少一个认养tabbar，所有updateIndex应传2高亮}else {tabService.updateRole(this,'0')tabService.updateIndex(this, 3) }}else{util.showErrorToast(res.errmsg);}})}
