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

微信小程序不规则导航栏

小程序导航栏规则app.json中的配置

"tabBar": {
    "color": "#000", //未选中时的字体颜色
    "selectedColor": "#3B86EB",  //选中时的字体颜色
    "backgroundColor": "#fff", //底部导航栏背景色
    "custom": true,//自定义导航栏
    "list": [//最少2个，最多5个
      {
        "pagePath": "pages/index/index",
        "text": "主页",
        "iconPath": "images/icon/t1.png",
        "selectedIconPath": "images/icon/t1-a.png"
      },
      {
        "pagePath": "pages/categories/index/index",
        "text": "全部分类",
        "iconPath": "images/icon/t2.png",
        "selectedIconPath": "images/icon/t2-a.png"
      },
      {
        "pagePath": "pages/order/orderPersonalElectronicFiles/orderPersonalElectronicFiles",
        "text": "电子档案",
        "iconPath": "images/icon/t3.png",
        "selectedIconPath": "images/icon/t3.png"
      },
      {
        "pagePath": "pages/shoppingCart/index/index",
        "text": "购物车",
        "iconPath": "images/icon/t4.png",
        "selectedIconPath": "images/icon/t4-a.png"
      },
      {
        "pagePath": "pages/personalCenter/index/index",
        "text": "个人中心",
        "iconPath": "images/icon/t5.png",
        "selectedIconPath": "images/icon/t5-a.png"
      }
    ]
  },

在代码根目录下添加custom-tab-bar

//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
      })
    }
  },
})