原生微信小程序实现自定义底部栏

说明

自定义tabbar并不是很难，遵循文档规则即可；自带的tabbar太过死板，而自定义的就比较灵活

组件相关代码

app.json 配置

"tabBar": {
    "custom": true,
    "color": "#000000",
    "selectedColor": "#000000",
    "backgroundColor": "#000000",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "/images/tabBar/home.png",
        "selectedIconPath": "/images/tabBar/home_active.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/map/map",
        "iconPath": "/images/tabBar/map.png",
        "selectedIconPath": "/images/tabBar/map_active.png",
        "text": "地图"
      },
      {
        "pagePath": "pages/order/order",
        "iconPath": "/images/tabBar/order.png",
        "selectedIconPath": "/images/tabBar/order_active.png",
        "text": "订单"
      },
      {
        "pagePath": "pages/mine/mine",
        "iconPath": "/images/tabBar/mine.png",
        "selectedIconPath": "/images/tabBar/mine_active.png",
        "text": "我的"
      }
    ]
  }

tabBar 的 wxml

<!-- 自定义底部栏 -->
<tabBar class="tabBar">
  <view data-tab="index" bindtap="onTab">
    <image class="img" hidden="{{tab == 'index'}}" src="/images/tabBar/home.png" mode="widthFix"></image>
    <image class="img" hidden="{{tab != 'index'}}" src="/images/tabBar/home_active.png" mode="widthFix"></image>
    <view class="tab-title">首页</view>
  </view>
  <view data-tab="map" bindtap="onTab">
    <image class="img" hidden="{{tab == 'map'}}" src="/images/tabBar/map.png" mode="widthFix"></image>
    <image class="img" hidden="{{tab != 'map'}}" src="/images/tabBar/map_active.png" mode="widthFix"></image>
    <view>地图</view>
  </view>
  <view>
    <image class="img-scan" src="/images/tabBar/scan.gif" mode="widthFix" catchtap="scan"></image>
  </view>
  <view data-tab="order" bindtap="onTab">
    <image class="img" hidden="{{tab == 'order'}}" src="/images/tabBar/order.png" mode="widthFix"></image>
    <image class="img" hidden="{{tab != 'order'}}" src="/images/tabBar/order_active.png" mode="widthFix"></image>
    <view>订单</view>
  </view>
  <view data-tab="mine" bindtap="onTab">
    <image class="img" hidden="{{tab == 'mine'}}" src="/images/tabBar/mine.png" mode="widthFix"></image>
    <image class="img" hidden="{{tab != 'mine'}}" src="/images/tabBar/mine_active.png" mode="widthFix"></image>
    <view>我的</view>
  </view>
</tabBar>

tabBar 的 wxss

.tabBar{
  position:fixed;
  width: 100%;
  height: 100rpx;
  bottom: 0;
  color: #8A8B8B;
  font-size: 20rpx;
  display: flex;
  justify-content: space-around;
  padding:  10rpx 0 20rpx 0;
  background-color: #fff !important;
  box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0,0,0,0.3);
  text-align: center;
}
.img{
  width: 48rpx;
  height: 48rpx;
}
.img-scan{
  position: relative;
  left: -15rpx;
  width: 180rpx;
  height: 108rpx;
  margin-top: -60rpx;
}
.tabBar > view{
  width: 150rpx;
}

tabBar的 js

const app = getApp()

Component({
  properties: {
    tab: String
  },
  observers:{ //监听数据的更改
    "tab"(data){
      this.data.tab = data //这里不要写this.setData({})
    }
  },
  externalClasses: ['my-class'],
  methods: {
    data: {
      tab: ''
    },
    onTab: function (e) {
      if (app.globalData.userInfo || ['index', 'map'].includes(e.currentTarget.dataset.tab)) {
        wx.switchTab({
          url: '/pages/' + e.currentTarget.dataset.tab + '/' + e.currentTarget.dataset.tab
        })
      } else {
        wx.navigateTo({
          url: '/packageOther/pages/loginStart/loginStart',
        })
      }
    },

    //扫描
    scan() {
      wx.scanCode().then(res => {
        console.log(res)
        let id = res.result.split('id=')[1]
        if (id) {
          wx.navigateTo({
            url: `/pages/startCharge/startCharge?id=${id}`,
          })
        }
      }).catch(e => {
        console.log('err', e)
      })
    }
  }
})

tabBar的 json

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