微信小程序自定义 底部 tabbar （中间凸起）

一、新建一个 tabbar 组件

1.新建文件

在与 pages 文件夹同级的地方新建 custom-tab-bar 文件夹，并新建 index.wxml 、index.wxss 、index.js 、index.json 四个文件夹

2.index.wxml

<view class="tab-bar">
    <view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
        <view class="center_part">
            <view class="center_part_code" wx:if="{{index == 2}}">
                <image class=" center-has-noimg" src="{{centerImg}}"></image>
            </view>
            <image class=" center-has-image" src="{{selected === index ? item.selectedIconPath : item.iconPath}}" wx:else></image>
        </view>
        <view style="color: {{selected === index ? selectedColor : color}}" class="cover-text">
            {{item.text}}
        </view>
        <view class="number" wx-if="{{item.number != ''}}">{{item.number}}</view>
    </view>
    <view class="safeArea"></view>
</view>

3.index.wxss

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 99;
  padding-top: 17rpx;
  background: url("https://ns51.eaia.cn/group1/M00/01/E4/wKgKymLgpdWARzR-AAANbZWJ5GM302.png")
    no-repeat;
  background-size: 100vw auto;
}

.tab-bar-item {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.tab-bar-item cover-image {
  width: 27px;
  height: 27px;
}

.tab-bar-item .cover-text {
  font-size: 10px;
}
.txt {
  color: #aaaaaa;
}
.fontWeight {
  font-weight: bold;
}
.bg_rec {
  background: #ffd324;
  width: 80rpx;
  min-height: auto;
  height: 20rpx;
  margin-top: -28rpx;
  vertical-align: text-bottom;
  border-radius: 0;
  z-index: -10;
}
.center_img {
  width: 100rpx;
  height: 100rpx;
  transform: translate(-50%);
  left: 50%;
  bottom: 0;
}
.center-has-noimg {
  width: 100%;
  height: 100%;
}
.center-has-image {
  width: 38rpx;
  height: 38rpx;
}
.center_part_code {
  padding: 15rpx;
  box-shadow: 0 0 0 #000;
  /* width: 100rpx;
    height: 100rpx; */
  position: absolute;
  top: -22px;
  z-index: 10;
  width: 90rpx;
  height: 90rpx;
  transform: translate(-50%);
  left: 50%;
  box-sizing: border-box;
  border-radius: 50%;
  background-color: #1296db;
}
.tab-bar-item:nth-child(3) > .cover-text {
  position: absolute;
  /* bottom: 4rpx; */
  bottom: calc(14rpx + env(safe-area-inset-bottom));
}
.number {
  position: absolute;
  font-size: 24rpx;
  min-width: 40rpx;
  min-height: 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  padding: 4rpx;
  line-height: 24rpx;
  background-color: #fd6334;
  border-radius: 50%;
  transform: translate(26rpx, -40rpx);
}

.safeArea {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(6rpx + env(safe-area-inset-bottom));
  background-color: #fff;
}

4.index.js

注意路径！！！

Component({
  data: {
    selected: 0,
    color: "#7A7E83",
    selectedColor: "#1296db",
    list: [
      {
        pagePath: "/pages/index/index",
        text: "首页",
        iconPath: "/static/images/tabbar/home.png",
        selectedIconPath: "/static/images/tabbar/home-active.png",
        number: "",
      },
      {
        pagePath: "/pages/goods/goods",
        text: "商品",
        iconPath: "/static/images/tabbar/goods.png",
        selectedIconPath: "/static/images/tabbar/goods-active.png",
        number: "",
      },
      {
        pagePath: "/pages/logs/logs",
        text: "",
        iconPath: "/static/images/tabbar/home.png",
        selectedIconPath: "/static/images/tabbar/home-active.png",
        number: "",
      },
      {
        pagePath: "/pages/notice/notice",
        text: "消息",
        iconPath: "/static/images/tabbar/test.png",
        selectedIconPath: "/static/images/tabbar/test-active.png",
        number: "",
      },

      {
        pagePath: "/pages/mine/mine",
        text: "我的",
        iconPath: "/static/images/tabbar/mine.png",
        selectedIconPath: "/static/images/tabbar/mine-active.png",
        number: "",
      },
    ],
    // background: '../static/tabbar-bg.png',
    centerImg: "/static/images/tabbar/cart.png",
  },
  
  // attached() {
  //     如果中间凸起跳转 tabbar 页面，则把下面注释打开
  //     if (this.data.selected == 2) {
  //         this.setData({
  //             centerImg: '/static/icon/xinjian.png'
  //         })
  //     } else {
  //         this.setData({
  //             centerImg: '/static/icon/xinjian.png'
  //         })
  //     }
  
  //     显示数字提示
  //     let numi = 'list[3].number'
  //     this.setData({
  //         [numi]: 12
  //     })
  // },

  methods: {
    // 切换 tab 事件
    switchTab(e) {
      const data = e.currentTarget.dataset;
      const path = data.path;
      const index = data.index;

      // 跳转页面
      if (index != 2) {
        wx.switchTab({
          url: path,
        });
      } else {
      //中间凸起跳转非tabbar
      //注意，如果跳转tabbar页面则不进行判断
        wx.navigateTo({
          url: "/pages/cart/cart",
        });
      }
    },
  },
});

5.index.json

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

二、配置 tabbar

1.app.json

复制后会报错，把图片和页面路径改掉就好了！！！

{
  "tabBar": {
    "custom": true, // 一定要写这个！！！
    "color": "#000",
    "selectedColor": "#1296DB",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "/static/images/tabbar/home.png",
        "selectedIconPath": "/static/images/tabbar/home-active.png"
      },
      {
        "pagePath": "pages/goods/goods",
        "text": "商品",
        "iconPath": "/static/images/tabbar/home.png",
        "selectedIconPath": "/static/images/tabbar/home-active.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "",
        "iconPath": "/static/images/tabbar/home.png",
        "selectedIconPath": "/static/images/tabbar/home-active.png"
      },
      {
        "pagePath": "pages/notice/notice",
        "text": "消息",
        "iconPath": "/static/images/tabbar/test.png",
        "selectedIconPath": "/static/images/tabbar/test-active.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "/static/images/tabbar/mine.png",
        "selectedIconPath": "/static/images/tabbar/mine-active.png"
      }
    ]
  }
}

2.在 tabbar 页面中设置

onShow() {
  if (typeof this.getTabBar === "function" && this.getTabBar()) {
    this.getTabBar().setData({
      // 这里的数字对应tabbar对应的索引
      selected: 4,
    });
  }
},

三、效果图

---

总结

提示：

不要无脑复制，复制到自己的项目中后记得更改图片、页面路径！！！
如需自定义 头部 navbar 请点击这里