微信小程序，自定义tabbar消失bug修复

1.可能不同微信版本出现的原因不一致哈，希望对你有用。

问题：

我这边在切换自定义tabbar时，切换到第四个，整个tabarJ界面就消失了，因为我这边的tabbar是动态配置的，我开始以为是加载网络图的问题，得用base64，但是不是，最终排查发现，在app.json中一部分tabbar界面使用，"navigationStyle": "custom"，而一部分界面又没有使用，在切换了很好几次之后，微信自己计算tabbar的高度就会出现问题（bottom：0这个参数出现问题），导致tabbar消失

解决：

全部界面都使用"navigationStyle": "custom"。

下面提供自定义导航计算与界面展示代码

app.js中编写（使用原生小程序的，直接把uni.，切换成wx.）

/**
			 * 设置导航栏信息
			 */
			setNavBarInfo() {
				let that = this;
				uni.getSystemInfo({
					success: function(res) {
						that.globalData.system.screenHeight = res.screenHeight
						that.globalData.system.screenWidth = res.screenWidth
						that.globalData.system.windowWidth = res.windowWidth
						//获取状态栏的高度
						let menuButtonObject = uni.getMenuButtonBoundingClientRect();
						if (!uni.getStorageSync("system"))
							uni.setStorageSync("system", JSON.stringify(menuButtonObject));
						if (!menuButtonObject.width) {
							menuButtonObject = JSON.parse(uni.getStorageSync("system"));
						}
						let statusBarHeight = res.statusBarHeight;
						const navTop = menuButtonObject.top; //胶囊按钮与顶部的距离

						const navBarHeight =
							statusBarHeight +
							menuButtonObject.height +
							(menuButtonObject.top - statusBarHeight) * 2; //导航高度
						that.globalData.system.models = res.platform; // 当前机型
						if (navBarHeight * 2 <= 0) {
							that.globalData.system.navBarHeight = uni.getStorageSync("navBarHeight");
						} else {
							that.globalData.system.navBarHeight = navBarHeight * 2;
							uni.setStorageSync("navBarHeight", that.globalData.system.navBarHeight);
						}
						that.globalData.system.navTop = navTop;
						that.globalData.system.statusBarHeight = statusBarHeight;
						that.globalData.system.platform = res.platform;
						const menu = uni.getMenuButtonBoundingClientRect()
						that.globalData.system.menuWidth = menu.width //胶囊宽度
						that.globalData.system.menuHeight = menu.height //胶囊高度   
						console.log(that.globalData.system, 'that.globalData.system')
					},
					fail(err) {},
				});
			},

globalData中定义

globalData:{
    system: { //导航栏宽高度对象
				windowWidth: 0,
				screenWidth: 375,
				screenHeight: 812,
				navTop: 0, // 胶囊按钮与顶部的距离
				navBarHeight: 0, // 导航栏高度
				menuBotton: 0, // 胶囊距底部间距（保持底部间距一致）
				menuRight: 0, // 胶囊距右方间距（方保持左、右间距一致）
				menuHeight: 0, // 胶囊高度（自定义内容可与胶囊高度保证一致）
				menuWidth: 0, //胶囊宽度
    },
}

界面（我这边是uniapp版本的，原生版本要看着改一下）

<template>
	<view v-if="getSetting.isShow" class="main" style="position: relative;"
		:style="{height: (system.menuHeight+system.navTop+2)+'px'}">
		<view class="nav"
			:style="{height: (system.menuHeight+system.navTop+2)+'px',backgroundColor: isShowBg?'#ffffff': row.styles.backgroundColor}">
			<view class="nav_status flex  f_ai_c" :style="{height: system.menuHeight+'px',top:system.navTop+'px' }">
				<view :style="{color:isShowBg?'#000':row.styles.frontColor}"
					class="fs34 fw500 flex nav_status_center posr">
					{{row.data.title}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			system: {
				type: Object,
				default: () => {}
			},
			isShowBg: {
				type: Boolean,
				default: false
			},
			row: {
				type: Object,
				default: () => {}
			},

		},
		computed: {
			getSetting() { 
				if (!this.row) return;
				const params = this.row.params
				const source = params.source
				const setting = params[source]
				return setting;
			},
		},
		name: '',
		data() {
			return {

			}
		},
		mounted() { 
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	.nav {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 999;
		transition: .1s all ease-out;
	}

	.nav .nav_status {
		position: fixed;
		z-index: 999;
		width: 100%;
	}

	.nav .nav_status .nav_status_left {
		position: absolute;
		width: 230rpx;
		height: 56rpx;
		left: 30rpx;
		top: 0;
		border-radius: 30px;
		border: 1px solid rgba(0, 109, 172, 0.4);
		background: rgba(255, 255, 255, 0.4);
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 0 16rpx;
	}

	.nav .nav_status .nav_status_center {
		margin: 0 auto;
	}
</style>

传入的数据结构

controls: {
					data: {
						title: "title"
					},
					id: "dbdh",
					name: "title",
					params: {
						auto: {
							isShow: true
						},
						source: "auto"
					},
					  
					styles: {
						backgroundColor: app.globalData.theme.data.theme.color1,
						frontColor: "#ffffff"
					}, 
					type: -1
				},