小程序自定义tabbar

先来看一下效果

1、根据微信官方文档说的，先在app.json配置一下

2、根目录下新建文件夹

3、编写代码
index.wxml
因为首页用到了地图组件，需要覆盖在上面，所以用了cover-view
这里外面多嵌套了一层是因为不嵌套的话中间扫码的图片就会显示不完全，高小于最外面的

<!--custom-tab-bar/index.wxml-->
<cover-view class="content-wrapper">
	<!-- <cover-image class="custom-tab-scan-img" src="../assets/home_tab_scan.png" catchtap="onClickScan"></cover-image> -->
	<cover-view class="custom-tab-scan-img" catchtap="onClickScan">
		<cover-image class="scan-icon" src="../assets/scan-icon.png"></cover-image>
	</cover-view>
	<cover-view class="custom-tab-main-container">
		<cover-view class="custom-main-wrapper">

			<cover-view class="custom-tab-item-container">
				<cover-view class="custom-tab-item-wraper {{curTabLabel === '首页'?'custom-tab-item-wraper-active':''}}" data-url="../home/home" catchtap="onClickTabItem">
					<!-- <cover-image class="custom-tab-icon-img" src="{{curTabLabel === '首页'?'../assets/home_tab_home_a.png':'../assets/home_tab_home_ua.png'}}"></cover-image> -->
					<cover-image class="custom-tab-icon-img" src="../assets/tab-home-icon.png"></cover-image>
					<cover-view>首页</cover-view>
				</cover-view>
			</cover-view>
			<cover-view class="custom-tab-item-container">
				<cover-view class="custom-tab-item-wraper {{curTabLabel === '电站'?'custom-tab-item-wraper-active':''}}" data-url="../stationdetails/stationdetails" catchtap="onClickTabItem">
					<cover-image class="custom-tab-icon-img" src="../assets/tab-station-icon.png"></cover-image>
					<cover-view>电站</cover-view>
				</cover-view>
			</cover-view>
			
			<!-- <cover-image class="custom-tab-scan-img" src="../assets/scan-icon.png" catchtap="onClickScan"></cover-image> -->

			<!-- 站位 -->
			<cover-view class="custom-tab-item-container"></cover-view>
			<!-- <cover-view class="custom-tab-scan-img custom-tab-item-container" catchtap="onClickScan">
				<cover-image class="scan-icon" src="../assets/scan-icon.png"></cover-image>
			</cover-view> -->

			<cover-view class="custom-tab-item-container">
				<cover-view class="custom-tab-item-wraper {{curTabLabel === '订单'?'custom-tab-item-wraper-active':''}}" data-url="../chargeorder/chargeorder" catchtap="onClickTabItem">
					<cover-image class="custom-tab-icon-img" src="../assets/tab-order-icon.png"></cover-image>
					<cover-view>订单</cover-view>
				</cover-view>
			</cover-view>

			<cover-view class="custom-tab-item-container">
				<cover-view class="custom-tab-item-wraper {{curTabLabel === '我的'?'custom-tab-item-wraper-active':''}}" data-url="../my/my" catchtap="onClickTabItem">
					<cover-image class="custom-tab-icon-img" src="../assets/tab-my-icon.png"></cover-image>
					<cover-view>我的</cover-view>
				</cover-view>
			</cover-view>
		</cover-view>
	</cover-view>
</cover-view>

index.wxss

/* custom-tab-bar/index.wxss */
.content-wrapper{
  height: 300rpx;
  position: fixed;
  bottom: 0;
  width: 100vw;
  /* z-index: -99; */
}
.custom-tab-main-container{
  position: fixed;
  z-index: -99;
  bottom: 0;
  width: 100vw;
  height: 170rpx;
  background-color: #fff;
  /* position: absolute; */
}
.custom-main-wrapper{
  background-color: #0C277C;
  width: 674rpx;
  height: 129rpx;
  margin: 20rpx auto 0;
  display: flex;
  justify-content: space-between;
  border-radius: 70rpx;
  box-shadow:0rpx 9rpx 18rpx rgba(0,0,0,0.4);
  /* position: fixed;
  z-index: -9;
  bottom: 20rpx; */
}
.custom-tab-bg-img{
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 111rpx;
}
.custom-tab-item-container{
  display: flex;
  justify-content: center;
  flex: 1;
  /* width: 24%; */
}
.custom-tab-item-wraper{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  align-self: flex-end;
  /* margin-bottom: 10rpx; */
  top: -15rpx;
  width: 56rpx;
  height: 90rpx;
  font-size: 28rpx;
  color: #999999;
}
.custom-tab-item-wraper-active{
  color: #68D5D0;
}
.custom-tab-scan-img{
  width: 160rpx;
  height: 161rpx;
  position: fixed;
  bottom: 40rpx;
  z-index: 99;
  left: 39%;
  border-radius: 50%;
  box-shadow:0px 8px 12px rgba(95, 75, 75, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #53C0FC;
}
.scan-icon{
  width: 90rpx;
  height: 90rpx;
}
.custom-tab-icon-img{
  width: 54rpx;
  height: 54rpx;
  margin-bottom: 11rpx;
}
.custom-tab-item-container:nth-child(2){
  padding-right: 15rpx;
}
.custom-tab-item-container:nth-child(4){
  padding-left: 15rpx;
}

index.js

// custom-tab-bar/index.js
const app = getApp();

Component({

  /**
   * 组件的初始数据
   */
  data: {
    curTabLabel: '首页',
    result:'',
    type:'restaurantweixin',
    show:'',
  },
  onLoad:function(option){
    console.log('onLoad')
    // var type = decodeURIComponent(option.type)
    // var conpanyCode = decodeURIComponent(option.conpanyCode)
    // console.log(type)
    // console.log(conpanyCode)
  },


  /**
   * 组件的方法列表
   */
  methods: {
    //点击tab项时触发
    onClickTabItem(e) {
      let { curTabLabel } = this.data;
      console.log(e)
      let { url } = e.currentTarget.dataset
      if (url === "../home/home" && curTabLabel !== "首页") {
        curTabLabel = "首页"
      } else if (url === "../stationdetails/stationdetails" && curTabLabel !== "电站") {
        curTabLabel = "电站"
        console.log(curTabLabel)
      } else if (url === "../chargeorder/chargeorder" && curTabLabel !== "订单") {
        curTabLabel = "订单"
        // console.log(curTabLabel)
      } else if (url === "../my/my" && curTabLabel !== "我的") {
        curTabLabel = "我的"
      }
      console.log(url)
      wx.switchTab({url})
      this.setData({
        curTabLabel
      })
      console.log(curTabLabel)
    },
    //点击扫描时触发
    onClickScan(e) {
      console.log(111)
      if (!app.globalData.userInfo) {
        wx.navigateTo({
          url: '../login/login',
        })
        return;
      }
      wx.scanCode({
        success(res) {
          let url = res.path.replace('pages','..');
          wx.navigateTo({
            url,
          })
        },
        fail(res){
          wx.navigateTo({
            url:'../home/home',
          })
        }
      })
      
    }

  }
})

index.json

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

4、在tabbar页面中使用

这里要写成Component

//组件所在页面的生命周期
pageLifetimes: {
    show() {
      this.setData({
        isShowCard: true
      })
      //设置底部tabBar的当前标签
      if (typeof this.getTabBar === 'function' &&
        this.getTabBar()) {
        this.getTabBar().setData({
          curTabLabel: '首页'
        })
      }
    }
  },