微信小程序自定义tabbar组件之中间按钮凸起

和我前面一篇文章差不多的， 只不过逻辑有点不同，直接上效果和代码吧

先来一个模板文件，我的图片放在模板文件里
wxml

  

    
      
      
      {{item.text}}
    
    
    
      
      {{item.text}}
    
  

wxss

.tabbar_box{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 98rpx;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
}
.tabbar_box.iphoneX-height{
    padding-bottom: 66rpx;
}
.middle-wrapper{
  position: absolute;
  right: 310rpx;
  bottom: 0;
  background-color: #fff;
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  border-top: 2rpx solid #f2f2f3;
}
.middle-wrapper.iphoneX-height{
  bottom: 66rpx;
}
.tabbar_nav{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 20rpx;
    height: 100%;
    position: relative;
}
.tabbar_icon{
    width: 56rpx;
    height: 56rpx;
}
.special-wrapper{
  position: absolute;
  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;
}
.special-wrapper .tabbar_icon{
    width: 84rpx;
    height: 84rpx;
}
.special-text-wrapper{
  width: 56rpx;
  height: 56rpx;
}

js代码

// tabBarComponent/tabBar.js
const app = getApp();
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    tabbar: {
      type: Object,
      value: {
        "backgroundColor": "#ffffff",
        "color": "#979795",
        "selectedColor": "#1c1c1b",
        "list": [
          {
            "pagePath": "/pages/index/index",
            "iconPath": "icon/icon_home.png",
            "selectedIconPath": "icon/icon_home_HL.png",
            "text": "首页"
          },
          {
            "pagePath": "/pages/classify/classify",
            "iconPath": "icon/icon_home.png",
            "selectedIconPath": "icon/icon_home_HL.png",
            "text": "分类"
          },
          {
            "pagePath": "/pages/middle/middle",
            "iconPath": "icon/icon_release.png",
            "isSpecial": true,
            "text": "发布"
          },
          {
            "pagePath": "/pages/car/car",
            "iconPath": "icon/icon_mine.png",
            "selectedIconPath": "icon/icon_mine_HL.png",
            "text": "购物车"
          },
          {
            "pagePath": "/pages/mine/mine",
            "iconPath": "icon/icon_mine.png",
            "selectedIconPath": "icon/icon_mine_HL.png",
            "text": "我的"
          }
        ]
      }
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    isIphoneX: app.globalData.systemInfo.model.search('iPhone X') != -1 ? true : false
  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

json代码

{
  "component": true,
  "usingComponents": {}
}

然后呢，就是app.json代码

{
  "pages": [
    "pages/index/index",
    "pages/middle/middle",
    "pages/classify/classify",
    "pages/car/car",
    "pages/mine/mine"
  ],
  "window": {
    "navigationBarBackgroundColor": "#fdb92c",
    "navigationBarTitleText": "你的项目名称"
  },
  "tabBar": {
    "backgroundColor": "#ffffff",
    "color": "#979795",
    "selectedColor": "#1c1c1b",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "tabbarComponent/icon/footer-i1.png",
        "selectedIconPath": "tabbarComponent/icon/footer-i1h.png"
      },
      {
        "pagePath": "pages/classify/classify",
        "text": "分类",
        "iconPath": "tabbarComponent/icon/footer-i2.png",
        "selectedIconPath": "tabbarComponent/icon/footer-i2h.png"
      },
      {
        "pagePath": "pages/car/car",
        "text": "购物车",
        "iconPath": "tabbarComponent/icon/footer-i4.png",
        "selectedIconPath": "tabbarComponent/icon/footer-i4h.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "tabbarComponent/icon/footer-i5.png",
        "selectedIconPath": "tabbarComponent/icon/footer-i5h.png"
      }
    ]
  },
  "sitemapLocation": "sitemap.json"
}

接着就是全局的app.js代码了

//app.js
App({
  onLaunch: function () {
    //隐藏系统tabbar
    wx.hideTabBar();
    
    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  onShow: function () {
    //隐藏系统tabbar
    wx.hideTabBar();
  },
  getSystemInfo: function () {
    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        that.globalData.systemInfo = res;
      }
    });
  },
  //全局点击事件
  editTabbar: function () {
    var tabbar = this.globalData.tabBar;
    var currentPages = getCurrentPages();
    var that = currentPages[currentPages.length - 1];
    var pagePath = that.route;
    (pagePath.indexOf('/') != 0) && (pagePath = '/' + pagePath);
    for (var i in tabbar.list) {
      tabbar.list[i].selected = false;
      (tabbar.list[i].pagePath == pagePath) && (tabbar.list[i].selected = true);
    }
    that.setData({
      tabbar: tabbar
    });
  },
  globalData: {
    systemInfo: null,//客户端设备信息
    userInfo: null,
    tabBar: {
      "backgroundColor": "#ffffff",
      "color": "#979795",
      "selectedColor": "#1c1c1b",
      "list": [
        {
          "pagePath": "/pages/index/index",
          "iconPath": "icon/footer-i1.png",
          "selectedIconPath": "icon/footer-i1h.png",
          "text": "首页"
        },
        {
          "pagePath": "/pages/classify/classify",
          "iconPath": "icon/footer-i2.png",
          "selectedIconPath": "icon/footer-i2h.png",
          "text": "分类"
        },
        {
          "pagePath": "/pages/middle/middle",
          "iconPath": "icon/icon_release.png",
          "isSpecial": true,
          "text": "推荐"
        },
        {
          "pagePath": "/pages/car/car",
          "iconPath": "icon/footer-i4.png",
          "selectedIconPath": "icon/footer-i4h.png",
          "text": "购物车"
        },
        {
          "pagePath": "/pages/mine/mine",
          "iconPath": "icon/footer-i5.png",
          "selectedIconPath": "icon/footer-i5h.png",
          "text": "我的"
        }
      ]
    }
  }
})

然后在你需要的页面引用就好了，比如index文件里

index.wxml代码

index.json代码

{
  "usingComponents": {
    "tabbar": "../../tabbarComponent/tabbar"
  }
}
``
index.js代码
`//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    tabbar: {},
  },
  
  onLoad: function () {
    app.editTabbar();
    
  }
})




以上就是所有代码了，可以直接运行，需要文件的说一下。