小程序自定义tabbar配置

1. 根目录下新建组件/components/custom-tab-bar

2. /components/custom-tab-bar/index.wxml

<cover-view class="tab-bar">
  <cover-view class="tab-bar-border"></cover-view>

  <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}"  bindtap="switchTab">
  <block wx:if="{{index === 1}}">
    <cover-view class="pub">{{item.text}}</cover-view>
  </block>

  <block wx:else> 
    <cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
    <cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
  </block>     
  </cover-view>
    
</cover-view>

    3. /components/custom-tab-bar/index.js

 // component/tabbar/tabbar.js
var app = getApp();

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    selected: {
        // 默认选中list[0]页面
      type:Number,
      value:0
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    color: "#7A7E83",  //默认颜色
    selectedColor: "#FF3030",  // 被选中后的颜色

    list: [{
      pagePath: "/pages/index/index",  // 页面路径
      iconPath: "/images/icons/usercenter.png",  // 图标路径
      selectedIconPath: "/images/icons/avatar.png",  // 被选中后的图片路径
      text: "首页"
    }, 
    {
      text: "发布"
    },
    {
      pagePath: "/pages/home/home",
      iconPath: "/images/icons/avatar.png",
      selectedIconPath: "/images/icons/usercenter.png",
      text: "我的"
    }]
  },
  /**
   * 组件的方法列表
   */
// 前端所需要调用函数，必须得在methods编写
 methods: {
    switchTab(e) {
      var data = e.currentTarget.dataset
      console.log(data);
      var url = data.path;
      if (url) {
        wx.switchTab({
          url: url
        })
      } else {
        if (app.globalData.userInfo) {
          wx.navigateTo({
            url: '/pages/publish/publish',
          })
        } else {
          wx.navigateTo({
            url: '/pages/auth/auth',
          })
        }
      }
    }
  }
});

    4. /components/custom-tab-bar/index.wxss

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: white;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-bar-border {
  background-color: rgba(0, 0, 0, 0.33);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  transform: scaleY(0.5);
}

.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-view {
  font-size: 10px;
}

.pub{
  background-color:dodgerblue ;
  height: 80rpx;
  width: 80rpx;
  border-radius: 50%;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

    5. /components/custom-tab-bar/index.json

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

    6. 调用页面/pages/index/index.wxml

<tabbar selected="{{2}}"></tabbar>

    7. 调用页面/pages/index/index.json

{
  "usingComponents": {
    "tabbar":"/component/custom-tab-bar/index" 
    }
}

    8. 全局文件app.json添加

"tabBar": {
    "custom": true,
    }

来源：https://www.cnblogs.com/yeli-oneselfblogs/p/17091335.html