做微信网站的公司泰州seo网络公司

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 = thisthis.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>