参考链接：https://www.jianshu.com/p/ce1c3c25527c
参考链接：https://blog.csdn.net/weixin_40851250/article/details/89917985
github链接：https://github.com/SuRuiGit/wxapp-customTabbar
实现效果：
image.png
<meta charset="utf-8">
集成到项目
第一步：找到项目中的tabbarComponent目录，拷贝到你的工程中，然后将tabbarComponent->icon图标替换成你自己的tabbar图片(建议把tabbarComponent目录与pages同级)
image
第二步：到app.json中配置tabBar，如果tabbar中间的按钮是跳到二级页面，就不要配置在tabBar的list中，如果配置了，中间的按钮点击是无效的，
image
要注意：如果不是跳转到二级页面，需要修改 tabbar.wxml
image.png
open-type改为"switchTab"
image.png
第三步：在app.js的onLaunch方法中调用hidetabbar()自己封装一下，代码如下，隐藏系统自带的tabBar直接写wx.hideTabBar在安卓8.0有bug，并且在每一个用到tabbar的js文件中的onReady和onShow中调用一下app.hidetabbar()，调用getSystemInfo()方法获取设备信息，主要是为了适配iPhone X，这个方法在下面会给出
image
//自己对wx.hideTabBar的一个封装
hidetabbar() {
wx.hideTabBar({
fail: function() {
setTimeout(function() { // 做了个延时重试一次，作为保底。
wx.hideTabBar()
}, 500)
}
});
},
getSystemInfo: function() {
let t = this;
wx.getSystemInfo({
success: function(res) {
t.globalData.systemInfo = res;
}
});
},
第四步：在app.js中的globalData中加入自定义tabbar和systemInfo的参数，再加入一个方法给tabBar.list配置中的页面使用，代码如下
editTabbar: function() {
let tabbar = this.globalData.tabBar;
let currentPages = getCurrentPages();
let _this = currentPages[currentPages.length - 1];
let pagePath = _this.route;
(pagePath.indexOf('/') != 0) && (pagePath = '/' + pagePath);
for (let i in tabbar.list) {
tabbar.list[i].selected = false;
(tabbar.list[i].pagePath == pagePath) && (tabbar.list[i].selected = true);
}
_this.setData({
tabbar: tabbar
});
},
globalData: {
systemInfo: null,//客户端设备信息
tabBar: {
"backgroundColor": "#ffffff",
"color": "#979795",
"selectedColor": "#1c1c1b",
"list": [
{
"pagePath": "/page/index/index",
"iconPath": "icon/icon_home.png",
"selectedIconPath": "icon/icon_home_HL.png",
"text": "首页"
},
{
"pagePath": "/page/myRelease/index",
"iconPath": "icon/icon_release.png",
"isSpecial": true,
"text": "发布"
},
{
"pagePath": "/page/mine/index",
"iconPath": "icon/icon_mine.png",
"selectedIconPath": "icon/icon_mine_HL.png",
"text": "我的"
}
]
}
}
app.js所有代码 注意tabBar-list-pagePath pages前面加/ 中间凸起在第三个加"isSpecial": true,
//app.js
App({
onLaunch: function () {
this.hidetabbar();
this.getSystemInfo();
},
//自己对wx.hideTabBar的一个封装
hidetabbar() {
wx.hideTabBar({
fail: function() {
setTimeout(function() { // 做了个延时重试一次，作为保底。
wx.hideTabBar()
}, 500)
}
});
},
getSystemInfo: function() {
let t = this;
wx.getSystemInfo({
success: function(res) {
t.globalData.systemInfo = res;
}
});
},
editTabbar: function() {
let tabbar = this.globalData.tabBar;
let currentPages = getCurrentPages();
let _this = currentPages[currentPages.length - 1];
let pagePath = _this.route;
(pagePath.indexOf('/') != 0) && (pagePath = '/' + pagePath);
for (let i in tabbar.list) {
tabbar.list[i].selected = false;
(tabbar.list[i].pagePath == pagePath) && (tabbar.list[i].selected = true);
}
_this.setData({
tabbar: tabbar
});
},
globalData: {
systemInfo: null,//客户端设备信息
tabBar: {
"color": "#727272",
"selectedColor": "#F46368",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "/pages/index/index",
"text": "首页",
"iconPath": "/component/tabbarComponent/icon/home.png",
"selectedIconPath": "/component/tabbarComponent/icon/homeSel.png"
},
{
"pagePath": "/pages/service/service",
"text": "服务",
"iconPath": "/component/tabbarComponent/icon/service.png",
"selectedIconPath": "/component/tabbarComponent/icon/serviceSel.png"
},
{
"pagePath": "/pages/navigati/navigati",
"text": "导航",
"iconPath": "/component/tabbarComponent/icon/navagati.png",
"isSpecial": true,
},
{
"pagePath": "/pages/order/order",
"text": "订单",
"iconPath": "/component/tabbarComponent/icon/order.png",
"selectedIconPath": "/component/tabbarComponent/icon/orderSel.png"
},
{
"pagePath": "/pages/my/my",
"text": "我的",
"iconPath": "/component/tabbarComponent/icon/my.png",
"selectedIconPath": "/component/tabbarComponent/icon/mySel.png"
}
]
}
}
})
第五步：在tabBar的list中配置的页面的.js文件的data中加入tabbar:{}，并在onload方法中调用app.editTabbar();
就是tab导航页面
例如：index.js
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
tabbar:{}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
app.editTabbar()
},
})
第六步：在tabBar的list中配置的页面的.json文件中加入"usingComponents": { "tabbar": "../../tabbarComponent/tabbar" }在.wxml文件中加入 <tabbar tabbar="{{tabbar}}"></tabbar>
就是tab导航页面
例如：index.json
{
"usingComponents": {
"tabbar": "/component/tabbarComponent/tabbar"
}
}
index.wxml
<view>
<view>首页</view>
<tabbar tabbar="{{tabbar}}"></tabbar>
</view>
第七步：修改tabbarComponent->tabbar.js->data中的代码，代码截图如下
这里就是作者的一个小bug，本来作者写的是=='iPhone X'，在模拟器上没有问题，但是真机上返回的却不是这个字段，所以我们要改成包含
image
这时效果：
image.png
中间图标有偏移
修改tabbar.wxss
image.png
找到这个类名.special-wrapper
改成：
.special-wrapper{
position: absolute;
left:0;
right: 0;
margin: auto;
top: -36rpx;
width: 96rpx;
height: 96rpx;
border-radius: 50%;
border-top: 2rpx solid #f2f2f3;
background-color: #fff;
text-align: center;
box-sizing: border-box;
padding: 6rpx;
}
到处bug解决
image.png
tabbar.js文件中有默认list 根据需要修改
image.png
