0、page.json定义页面pages

//page.json
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/indexPage/index",  //首页
			"style": {
				"navigationStyle": "custom", 
				"navigationBarTextStyle": "white" 
			}
		},
		{
			"path": "pages/my/index",
			"style": {
				"navigationStyle": "custom" // 我的
			}
		},
		{
			"path": "pages/playList/index",
			"style": {
				"navigationStyle": "custom", // 列表
				"enablePullDownRefresh": true
			}
		}
	],

1、 page.json中定义tabbar 并设置自定义样式 “custom”: true

//page.json

"tabBar": {
	"custom": true,
	"selectedColor": "#79D5AD",
	"color": "#999999",
	"backgroundColor": "#ffffff",
	"borderStyle": "white",
	"height": "0px",
	"list": [{
		"pagePath": "pages/indexPage/index",
		"text": " "
	}, {
		"pagePath": "pages/playList/index",
		"text": " "
	}, {
		"pagePath": "pages/my/index",
		"text": " "
	}]
}

2、封装tabbar公共组件，在实现页面跳转的时候用uni.switchTab()方法

//pl_footer.vue 自己封的组件
uni.switchTab({
				url: "/pages/indexPage/index",
				success: function(e) { //跳转成功后刷新页面
					var page = getCurrentPages().pop();
					if (page == undefined || page == null) return;
					page.onLoad();
				}
			})

3、在tabar页面中
（1） 引用公共组件

 // index.vue  首页
    <view>
		<tarBar tarbarType="index"></tarBar>
	</view>
	...
    import tarBar from '@/components/pl_nav/pl_footer.vue'
    ...
	components: {
		PlayCard: playCard,
		tarBar: tarBar
	}

（2）、uni.hideTabBar（）隐藏原来的页面 一定要有

//index.vue

 onShow(e) {
		uni.hideTabBar({ //去掉自带的tabar 
		})
	}