小程序自定义tabbar实现中间图标突出效果

参考链接：https://www.jianshu.com/p/ce1c3c25527c
参考链接：https://blog.csdn.net/weixin_40851250/article/details/89917985
github链接：https://github.com/SuRuiGit/wxapp-customTabbar

实现效果：

image.png

集成到项目

第一步：找到项目中的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文件中加入

就是tab导航页面
例如：index.json

{
  "usingComponents": {
    "tabbar": "/component/tabbarComponent/tabbar"
  }
}

index.wxml

  首页
  

第七步：修改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