微信小程序自定义底部导航栏

自定义导航栏APP.JSON中的配置

在app.js的tabBar中配置
"custom": true //自定义导航栏，不配置时使用app.json中配置的导航栏

//index.js
Component({
  /**
   * 组件的初始数据
   */
  data: {
    selected: 0,//默认选中首页
    color: "#1F1F1F",
    selectedColor: "#3B86EB",
    backgroundColor: "#ffffff",
    list: [
      {
        pagePath: "/pages/index/index",
        iconPath: "/images/icon/t1.png",
        selectedIconPath: "/images/icon/t1-a.png",
        text: "主页"
      },
      {
        pagePath: "/pages/categories/index/index",
        iconPath: "/images/icon/t2.png",
        selectedIconPath: "/images/icon/t2-a.png",
        text: "全部分类"
      },
      {
        pagePath: "/pages/order/orderPersonalElectronicFiles/orderPersonalElectronicFiles",
        iconPath: "/images/icon/t3.png",
        selectedIconPath: "/images/icon/t3.png",
        isSpecial: true, // 标记特殊图标---中间那个
        text: "电子档案"
      },
      {
        pagePath: "/pages/shoppingCart/index/index",
        iconPath: "/images/icon/t4.png",
        selectedIconPath: "/images/icon/t4-a.png",
        text: "购物车"
      },
      {
        pagePath: "/pages/personalCenter/index/index",
        iconPath: "/images/icon/t5.png",
        selectedIconPath: "/images/icon/t5-a.png",
        text: "个人中心"
      },

    ]
  },
  attached() {
  },
  /**
   * 组件的方法列表
   */
  methods: {
    nav(e) {
      console.log(e.currentTarget.dataset);
      const data = e.currentTarget.dataset
      const url = data.path
      console.log(url)
      if (url) wx.switchTab({ url })
    }
  }
})

//index.css
.tabbar image{
  width: 40rpx;
  height: 40rpx;
  display: block;
  margin: 0 auto 10rpx;
}
.cu-bar{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  color: #000 !important;
  background-color: #fff;
}
.adAction image{
  width: 80rpx;
  height: 80rpx;
  vertical-align: middle;
  position: relative;
  top: -20rpx;
}
.adAction text{
  position: relative;
  top: -20rpx;
}
.text-active{
  color: #3b86eb;
}

// index.wxml
<view class="cu-bar tabbar bg-white">
  <block wx:for="{{list}}" wx:key="{{item.pagePath}}">
    <view class="action text-active {{item.isSpecial?'adAction':''}}" bindtap="nav" data-path="{{item.pagePath}}" data-index="{{index}}" style="color:{{selected === index ? selectedColor : color}}">
      <image src="{{selected === index ? item.selectedIconPath : item.iconPath}}" mode="aspectFit"></image>
      <text>{{item.text}}</text>
    </view>
  </block>
</view>

自定义导航栏在ONLOAD调用

 //// pages/personalCenter/index/index.js 
 //个人中心
Page({
  onLoad: function(options) {
    if (typeof this.getTabBar === 'function' &&
      this.getTabBar()) {
      this.getTabBar().setData({
        selected: 4//个人中心 下标为4
      })
    }
  },
})