解决小程序自定义tabbar栏切换闪屏的效果（uniapp自定义同样解决）

话不多说，直接上代码解决问题

自定义导航栏的时候会定义一个tabbar的页面，如下：（需求不一样代码不一样，大致效果是一样的）

<view class="tabbar">
		<view class="tabbar-item" @click="onChange(1)">
				<image v-if="'pages/index/index' == curretnPage"   src="../../static/btn_gc@2x.png"></image>
				<image v-else src="../../static/btn_gc1@2x.png"></image>
				<view :class="'pages/index/index' == curretnPage ? 'tabbar-item-active' : ''">首页</view>
		</view>
		<view class="tabbar-item"  @click="onChange(2)">
				<image v-if="'pages/recommend/recommend' == curretnPage"  src="../../static/btn_tj@2x.png"></image>
				<image v-else src="../../static/btn_tj1@2x.png"></image>
				<view :class=" 'pages/recommend/recommend' == curretnPage ? 'tabbar-item-active' : ''">推荐</view>
		</view>
		<view class="tabbar-item" @click="onChange(3)" >
			<image class="tabbar-item-img" src="../../static/btn_fb@2x.png"></image>
		</view>
		<view class="tabbar-item" @click="onChange(4)">
			<image v-if="'pages/message/message' == curretnPage"  src="../../static/btn_XX@2x.png"></image>
			<image v-else src="../../static/btn_xx1@2x.png"></image>
			<view :class=" 'pages/message/message' == curretnPage ? 'tabbar-item-active' : ''">消息</view>
		</view>
		<view class="tabbar-item" @click="onChange(5)">
			<image v-if="'pages/center/center' == curretnPage"  src="../../static/btn_wd@2x.png"></image>
			<image v-else src="../../static/btn_wd1@2x.png"></image>
			<view :class=" 'pages/center/center' == curretnPage ? 'tabbar-item-active' : ''">我的</view>
		</view>
	</view>


onChange(index){
				if(index == 1){
					wx.switchTab({
						url:'../../pages/index/index'
					})
				}else if(index == 3){
					this.$emit('releasePopup')
				}else if(index == 2){
					wx.switchTab({
						url:'../../pages/recommend/recommend'
					})
				}else if(index == 5){
					wx.switchTab({
						url:'../../pages/center/center'
					})
				}else if(index == 4){
					wx.switchTab({
						url:'../../pages/message/message'
					})
				}
			}

在pages.json中定义tabbar

"tabBar":{
		"color": "#646D7E",
		"selectedColor": "#4A8CF5",
		"list":[
			{
				"pagePath": "pages/index/index",
				"text": "首页",
				"iconPath": "/static/btn_gc1@2x.png",
				"selectedIconPath": "/static/btn_gc@2x.png",
				"clas": "#646D7E",
				"selectedColor": "#4A8CF5"
			},
			{
				"pagePath": "pages/recommend/recommend",
				 "text": "推荐",
				 "iconPath": "/static/btn_tj1@2x.png",
				 "selectedIconPath": "/static/btn_tj@2x.png",
				 "clas": "#646D7E",
				 "selectedColor": "#4A8CF5"
			},
			{
				"pagePath": "pages/message/message",
				 "text": "消息",
				 "iconPath": "/static/btn_xx1@2x.png",
				 "selectedIconPath": "/static/btn_XX@2x.png",
				 "clas": "#646D7E",
				 "selectedColor": "#4A8CF5"
			},
			{
				"pagePath": "pages/center/center",
				 "text": "我的",
				 "iconPath": "/static/btn_wd1@2x.png",
				 "selectedIconPath": "/static/btn_wd@2x.png",
				 "clas": "#646D7E",
				 "selectedColor": "#4A8CF5"
			}
		]
	},

在app.js中

onShow: function() {
			wx.hideTabBar()
		},

如果不放心就在每个tabbar的页面的onshow方法中同样加上这行代码

这样就完美的解决了

这里面关键的就是跳转的页面的方式是switchTab，但是你没有在pages.json中定义Page.josn里定义tabbar时是不会跳转的，所以必须在page.json里定义tabbar，然后在app.js里将tabbar隐藏掉

在uniapp里面的时候也是一样的解决办法 就是把wx换成uni