uniapp tabBar 中设置“custom“: true 在H5和app中无效解决办法

uniapp小程序自定义底部tabbar，但是在转成H5和app时发现"custom": true 无效，原生tabbar会显示出来

解决办法如下
在tabbar的list中设置 “visible”:false

代码如下：

"tabBar": {
		"custom": true,
		//"custom"仅对小程序生效
		"color": "#333",
		"fontSize": "12",
		"selectedColor": "#3F8CFF",
		"borderStyle": "black",
		"backgroundColor": "#fff",
		"list": [{
				"pagePath": "pages/index/index",
				"iconPath": "/static/tabbar/index.png",
				"selectedIconPath": "/static/tabbar/index-active.png",
				"text": "首页",
				"visible":false
				//"visible"仅对H5
			}, {
				"pagePath": "pages/workbench/index",
				"iconPath": "/static/tabbar/workbench.png",
				"selectedIconPath": "/static/tabbar/workbench-active.png",
				"text": "工作台",
				"visible":false
			},
			{
				"pagePath": "pages/mine/index",
				"iconPath": "/static/tabbar/mine.png",
				"selectedIconPath": "/static/tabbar/mine-active.png",
				"text": "我的",
				"visible":false
			}
		]
	}

注意：在App.vue里一定要加上这段代码 uni.hideTabBar，否则在app打包后，会有原生tabbar的样式

<script>
	export default {
		onLaunch: function() {
			//一定要加上这段
			uni.hideTabBar({
			  animation: false // 是否使用动画效果
			});
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

tabbar组件样式代码如下：

<template>
	<!-- Tabbar 组件  -->
	<view>
		<view class="cu-bar" :style="{
			backgroundColor:tabBarObj.backgroundColor?tabBarObj.backgroundColor:'#fff'
		}">
			<view @click="cubarClick(item)" class="cu-bar-box" v-for="(item,index) in tabBarList" :key="index">
				<view v-if="item.text !='工作台'">
					<!-- 有站内消息在我的右上角提示 -->
					<!-- <view v-if="item.text =='我的'" class="tishiBox">
					</view> -->
					<view class="">
						<image v-if="pageCur ==item.pagePath" class="cu-bar-icon" :src="item.selectedIconPath" mode="">
						</image>
						<image v-else class="cu-bar-icon" :src="item.iconPath" mode=""></image>
					</view>
					<view :style="{
					color:pageCur ==item.pagePath?tabBarObj.selectedColor:tabBarObj.color,
					fontSize:tabBarObj.fontSize+'px'
				}">
						{{item.text||'-'}}
					</view>
				</view>
				<view class="yuanBox" v-else>
					<view class="yuanTop"></view>
					<view class="yuanjuli"></view>
					<view class="yuan" :class="{yuanActive:pageCur ==item.pagePath}">
						<image v-if="pageCur ==item.pagePath" class="cu-bar-icon yuan-cu-bar-icon"
							:src="item.selectedIconPath" mode="">
						</image>
						<image v-else class="cu-bar-icon yuan-cu-bar-icon" :src="item.iconPath" mode="">
						</image>
					</view>
				</view>
			</view>
		</view>
		<view :style="{
			height:cardHeight+'px'
		}">
			<!-- 底部占位使用，内容超出页面高度产生滚动条时，tabbar不会遮盖引用页面内容 -->
		</view>
	</view>
</template>
<script>
	import pagesJson from '@/pages.json'; // 引用配置文件的tabbar配置信息
	export default {
		props: {
			pageCur: {
				type: String,
				default: 'pages/index/index' //默认为首页
			}, //  tabbar当前页面
		},
		data() {
			return {
				tabBarObj: pagesJson.tabBar, //tabbar全部配置
				tabBarList: pagesJson.tabBar.list, //tabbar列表
				cardHeight: 0, //tabbar高度
			}
		},
		onLoad() {
		},
		onShow: function() {},
		mounted() {
			let than = this
			this.createIntersectionObserver().relativeToViewport().observe('.cu-bar', (res) => {
				than.cardHeight = res.intersectionRect.height || 0
				// console.log("元素高度信息",res.intersectionRect.height)
				// res.id // 目标节点 id
				// res.dataset // 目标节点 dataset
				// res.intersectionRatio // 相交区域占目标节点的布局区域的比例
				// res.intersectionRect // 相交区域
				// res.intersectionRect.left // 相交区域的左边界坐标
				// res.intersectionRect.top // 相交区域的上边界坐标
				// res.intersectionRect.width // 相交区域的宽度
				// res.intersectionRect.height // 相交区域的高度
			})
		},
		methods: {
			cubarClick(item) {
				// console.log("点击的元素",item)
				uni.switchTab({
					url: '/' + item.pagePath
				});
			}
		}
	}
</script>

<style scoped>
	.cu-bar {
		display: flex;
		width: 100vw;
		padding-bottom: 40rpx;
		padding-top: 10rpx;
		position: fixed;
		bottom: 0px;
		left: 0px;
		right: 0px;
		box-shadow: 0 -1rpx 6rpx rgba(0, 0, 0, 0.1);
	}

	.cu-bar .cu-bar-box {
		flex: 1;
		text-align: center;
		position: relative;
	}

	.cu-bar .cu-bar-icon {
		width: 50rpx;
		height: 50rpx;
		display: inline-block;
	}

	.yuanBox {
		position: relative;
		background: pink;
		text-align: center;
	}

	.yuanTop {
		height: 80rpx;
		background-color: #fff;
		border-radius: 78rpx 78rpx 0rpx 0rpx;
		border-bottom: 0rpx;
		width: 160rpx;
		margin: 0 auto;
		box-shadow: 0 -1rpx 6rpx rgba(0, 0, 0, 0.1);
		position: absolute;
		top: -35rpx;
		left: 50%;
		margin-left: -80rpx;
	}

	.yuanjuli {
		height: 60rpx;
		margin-top: 0rpx;
		background: #fff;
		position: absolute;
		width: 100%;
		top: -10rpx;
	}

	.yuan {
		display: inline-flex;
		background: #fff;
		border: 2rpx solid #ccc;
		width: 96rpx;
		height: 96rpx;
		padding: 14rpx;
		box-sizing: border-box;
		border-radius: 50%;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		position: absolute;
		left: 50%;
		margin-left: -48rpx;
		top: -14rpx;

	}

	.yuan .yuan-cu-bar-icon {
		width: 100%;
		height: 100%;
	}

	.yuanActive {
		background: #3F8CFF;
		border: 2rpx solid #3F8CFF;
	}

	.tishiBox {
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background-color: #ff3737;
		position: absolute;
		left: 60%;
		top: 0rpx;
	}
</style>

引用页面代码如下：

<tabbarBox pageCur="pages/index/index" />
//注意：pageCur  引用tabbar页面地址是什么，这里就传什么   tabbar组件跳转时使用

<script>
	import tabBox from '@/components/tabBox.vue';
	export default {
		components: {
			tabbarBox
		},
		
	}
</script>