小程序自定义底部导航栏

1.先在app.json中加上tabBar对象，并声明custom: true

"tabBar": {
    "custom": true,
    "color": "#666666",
    "selectedColor": "#0FBE5B",
    "backgroundColor": "#FCFCFC",
    "borderStyle": "white",
    "list": [{
        "iconPath": "/images/promoter/icon-home1.png",
        "selectedIconPath": "/images/promoter/icon-home2.png",
        "pagePath": "pages/promoter/home/index",
        "text": "首页"
      },
      {
        "iconPath": "/images/promoter/icon-company1.png",
        "selectedIconPath": "/images/promoter/icon-company2.png",
        "pagePath": "pages/promoter/company/list",
        "text": "看企业"
      },
      {
        "iconPath": "/images/promoter/icon-datum1.png",
        "selectedIconPath": "/images/promoter/icon-datum2.png",
        "pagePath": "pages/promoter/datum/list",
        "text": "看数据"
      }
    ]
  },

2.创建自定义导航栏组件custom-tab-bar（不能改）

 

 index.wxml

<!--miniprogram/custom-tab-bar/index.wxml-->
<cover-view class="tab-bar" hidden="{{isHidden}}">
  <cover-view wx:if="{{list!=null && list.length>0}}" wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
    <cover-image class="tab-bar-img" src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
    <cover-view class="tab-bar-text" style="color: {{selected === index ? selectedColor : color}}">{{item.text}}
    </cover-view>
    <cover-view class="tab-bar-line" style="background:{{selected === index?selectedColor:'none'}}"></cover-view>
  </cover-view>
</cover-view>

index.js

Component({
  properties: {
    isverify: { //是否进行校验
      type: Boolean,
      value: false,
      observer: function (nVal, oVal) {
        this.setData({
          isVerifyFlag: nVal
        })
      },
    },
  },
  data: {
    isHidden: false, //是否显示底部菜单栏
    selected: 0, //选中菜单栏项
    color: "#666666",
    selectedColor: "#0FBE5B",
    list: [{
        "iconPath": "/images/promoter/icon-home1.png",
        "selectedIconPath": "/images/promoter/icon-home2.png",
        "pagePath": "/pages/promoter/home/index",
        "text": "首页"
      },
      {
        "iconPath": "/images/promoter/icon-company1.png",
        "selectedIconPath": "/images/promoter/icon-company2.png",
        "pagePath": "/pages/promoter/company/list",
        "text": "看企业"
      },
      {
        "iconPath": "/images/promoter/icon-datum1.png",
        "selectedIconPath": "/images/promoter/icon-datum2.png",
        "pagePath": "/pages/promoter/datum/list",
        "text": "看数据"
      }
    ], //标签项
    isVerifyFlag: false, //是否校验是否跳转
  },
  attached() {},
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset;
      const url = data.path;
      console.log(url)
      if (this.data.isVerifyFlag) {
        this.triggerEvent('onClick', data);
        return;
      }
      wx.switchTab({
        url
      })
      this.setData({
        selected: data.index
      })
    },
    hiddenTabbar(flag) {
      //是否隐藏菜单栏
      var flag = flag ? true : false;
      this.setData({
        isHidden: flag
      })
    },
  }
})

index.wxss

.tab-bar {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
  background: white;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
  /* border-top: 2rpx solid #dddddd; */
  background: #F2F2F2;
}

.tab-bar-item {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 100rpx;
  padding: 20rpx 0 10rpx;
}

.tab-bar-item .tab-bar-img {
  display: block;
  width: 44rpx;
  height: 44rpx;
}

.tab-bar-item .tab-bar-text {
  line-height: 50rpx;
  font-size: 26rpx;
}

.tab-bar-line {
  width: 60rpx;
  height: 4rpx;
  border-radius: 10rpx;
}

index.json

{
  "component": true
}

注意：

（1）app.json中的pagePath页面地址前面不需要加“/”，而index.js中的pagePath页面地址前面则需要加“/”，不然点击切换时会报错

（2）底部导航栏所声明的页面必须在主包中，不能写在分包。

3.自定义底部导航栏组件的使用

 在/pages/promoter/home/index页面的js中声明显示为选中状态（selected:选中下标从0开始）

  onShow: function () {
    if (typeof this.getTabBar === 'function' &&
      this.getTabBar()) {
      this.getTabBar().setData({
        selected: 0
      })
    }
  },

在页面中使用时，如果有弹窗会被底部导航栏遮挡，底部导航栏层级最高，这时需要暂时隐藏导航栏。

在custom-tab-bar下的index.js中声明有isHidden: false，用于显示隐藏底部导航栏。

隐藏或显示底部导航栏使用

 this.getTabBar().hiddenTabbar(true); //true-隐藏导航栏，false-显示导航栏