uniapp自定义底部导航栏h5有效果小程序无效的解决方案

有时候使用uniapp开发h5和小程序时，uni自带的底部导航栏可能满足不了我们的需求，我们需要自定义样式，如下：

相信很多朋友一看官网直接在uniapp的pages.json中直接这样定义：

然后你会很惊奇的发现h5是可以显示的，但是小程序是无效的哦（这下是不是懵逼了，苦苦还在找自己代码的问题，哈哈哈）

解决方法如下：

1.在以下位置加上"custom":true，这是你会发现小程序的底部导航不见了，不见就是对的

2.，然后在项目的根目录下引入custom-tab-bar（里面包括wxml、wxss、json、js）文件夹，以下涉及到的图片路径按照你自己的需求写，我这里是我的本地，所以你拷过去图片地址会报错

//wxml
<view class="tab-bar">
  <view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab" >
    <view class="center_part" >
      <view class="center_part_code" wx:if="{{item.isSpecial}}">
        <image class=" center-has-noimg" src="../static/add1.png" ></image>
      </view>
      <image class=" center-has-image" class="{{index==2?'centerAdd':'center-has-image'}}"  src="{{selected === index ? item.selectedIconPath : item.iconPath}}" wx:else></image>
    </view>
    <view style="color: {{selected === index ? selectedColor : color}}" class="cover-text">{{item.text}}</view>
  </view>
</view>

//js
Component({
  data: {
    selected: 0, // 目前tab所在的index
    color: "#999", // 未选中颜色
    selectedColor: "#D0021B", // 选中颜色<br>　　// tab 自定义配置需与index.json 保持一致
    list: [{
      pagePath: "/pages/Home/index",
      iconPath: "../static/logo.png",
      selectedIconPath: "../static/logo.png",
      text: "首页",
      isSpecial: false
    }, {
      pagePath: "/pages/Message/index",
      iconPath: "../static/logo.png",
      selectedIconPath: "../static/logo.png",
      text: "商品列表",
      isSpecial: false
    }, {
      pagePath: "/pages/pay/index",
      iconPath: "../static/add1.png",
      selectedIconPath: "../static/add2.png",
      text: "",
      isSpecial: false
    },  {
      pagePath: "/index/index2",
      iconPath: "../static/logo.png",
      selectedIconPath: "../static/logo.png",
      text: "历史订单",
      isSpecial: false
    }, {
      pagePath: "/index/index2",
      iconPath: "../static/logo.png",
      selectedIconPath: "../static/logo.png",
      text: "我的",
      isSpecial: false
    }],
  },
  methods: {　　// 切换 tab 事件
    switchTab(e) {
      let that = this
      const idx = e.currentTarget.dataset.index
      const path = e.currentTarget.dataset.path
 
      // 跳转页面
      wx.switchTab({
         url: path,
      })
 
      that.setData({
        selected: idx
      })
    }
  }
})   

//wxss
.tab-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: url(https://www.yuanbap.cn/static/bg.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	height: 150rpx;
	display: flex;
	padding-bottom: env(safe-area-inset-bottom);
	z-index: 99;
	position: relative;
	padding-top: 17rpx;

}

.tab-bar-item {
	flex: 1;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	    padding-top: 39rpx;
		box-sizing: border-box;
}

.tab-bar-item cover-image {
	width: 55px;
	height: 55px;
}

.tab-bar-item .cover-text {
	font-size: 14px;
}

.txt {
	color: #aaaaaa;
}

.fontWeight {
	font-weight: bold;
}

.bg_rec {
	background: #ffd324;
	width: 80rpx;
	min-height: auto;
	height: 20rpx;
	margin-top: -28rpx;
	vertical-align: text-bottom;
	border-radius: 0;
	z-index: -10;
}

.center_img {
	width: 100rpx;
	height: 100rpx;
	transform: translate(-50%);
	left: 50%;
	bottom: 0;
}

.center-has-noimg {
	width: 100%;
	height: 100%;
}

.center-has-image {
	width: 35rpx;
	height: 35rpx;
}

.centerAdd {
	width: 100rpx;
	height: 100rpx;
	margin-top: -42rpx;
}

.center_part_code {
	padding: 10rpx;
	box-shadow: 0 0 0 #000;
	/* width: 100rpx;
  height: 100rpx; */
	position: absolute;
	top: -30px;
	z-index: 10;
	width: 106rpx;
	height: 106rpx;
	transform: translate(-50%);
	left: 50%;
}

注意！注意！注意！最后你点击底部导航栏切换页面的时候会遇到以下问题：

切换到第二项后在切换到第一项，你会发现激活的图标和文字不是当前页面的，而是上一个页面的，解决方法如下：
在使用tabBar的页面加上以下代码：
onShow: function() {
//在这里需要注意的是，你可能百度出来的使用的是this.getTabBar()，在uniapp项目中这个是没作用的，打印它要么就是undefined，要么就是它不是一个函数，所以在uniapp项目中使用的是this.$mp.page.getTabBar
			if (typeof this.$mp.page.getTabBar === 'function' && this.$mp.page.getTabBar()) {
				this.$mp.page.getTabBar().setData({
					selected: 0 //数字是当前页面在tabbar的索引,如我切换的当前页面的索引是0
				})
			}
		},

这就ok啦，注意这地方的背景图不支持本地图片路径，要么转成base64，要么放到服务器，我在这里是放到服务器的，解决了你的问题就点个赞关注一哈，一起学习哦