uniApp自定义底部导航栏 凸起效果

今天的需求是自定义导航栏，后来想了想可能又要考虑到适配机型的情况，还挺麻烦的所以先去看了下 uview组件库，没想到人家都已经有写好的了和我需求完全相符。

基本教程看文档就会 很简单 https://www.uviewui.com/components/tabbar.html 


以下主要讲使用时候遇到的几个坑

1.数据可以放到vuex 但是直接引用会h5正常，小程序失效，必须在组件的onLoad里面 重新赋值一次 

例如我的vuex State中有一个List数组  ->

state: {
					hasLogin: false,
					isUniverifyLogin: false,
					loginProvider: "",
					openid: null,
					testvuex: false,
					colorIndex: 0,
					colorList: ['#FF0000', '#00FF00', '#0000FF'],
					noMatchLeftWindow: true,
					active: 'componentPage',
					leftWinActive: '/pages/component/view/view',
					activeOpen: '',
					menu: [],
					univerifyErrorMsg: '',
					//vuex保存状态部分
					userInfoWx: null, //用户个人信息从local中获取
					//保存底部tabBarList列表
					tabBarList: [{
							pagePath: "/pages/index/index", //页面地址
							iconPath: "/static/tabBar/IndexOff.png", //未选中时的图片
							selectedIconPath: "/static/tabBar/IndexOn.png", //选中时的图片
							text: "首页" //菜单文字
						},
						{
							pagePath: "/pages/Business/Business",
							iconPath: "/static/tabBar/ShangJiaOff.png",
							selectedIconPath: "/static/tabBar/ShangJiaOn.png",
							text: "商家"
						},
						{
							pagePath: "/pages/distribution/distribution",
							iconPath: "/static/tabBar/Fenxiao.png",
							selectedIconPath: "/static/tabBar/Fenxiao.png",
							text: "分销客",
							midButton: true,
						},
						{
							pagePath: "/pages/Order/Order",
							iconPath: "/static/tabBar/DingDanOff.png",
							selectedIconPath: "/static/tabBar/DingDanOn.png",
							text: "订单"
						},
						{
							pagePath: "/pages/My/My",
							iconPath: "/static/tabBar/MyOff.png",
							selectedIconPath: "/static/tabBar/MyOn.png",
							text: "我的"
						},
					]



在页面我本来想这样直接引用




这样正常在h5没问题，可以展示，切换，但是到了小程序，底部就获取不到数据了。

于是我去把uview下的模板项目打开去小程序跑了一次，发现他的没问题，所以我就在看我们的不同点开始找办法。

最后发现果然是vuex的数据丢失了。 具体我也不知道为啥，有懂得老哥可以说一下。。

然后我就在onLoad里面 和data里面 重新对属性进行赋值了一次。就好了。

	data() {
		return { 
			tabList:'',
        }

onLoad(){

    this.tabList = this.$store.state.tabBarList;  //启用自定义导航栏
}


这样小程序就正常了。。


接下来又遇到另外一个问题，由于该组件会自动隐藏原生的uni底部标签栏，所以原生的tab切换事件也就失效了，替代的是组件封装好的 @change 方法 或者before-switch 切换之前触发的方法

我选择了change 可以获取到点击的tab 目前暂时没遇到什么问题，后续遇到坑会追加的。

展示一下效果图  选中前

选中后   

 

还好有uview组件封装好了适配底部机型，并且性能也是不错的。不然要自己去写兼容了 。

感谢uview