uniapp自定义导航栏样式_data-cur uni

1.思路：将导航栏和导航页面分别做成组件，通过PageCur确定当前页面。

2.坑：导航页面不能使用页面生命周期，即onLoad和onShow，但是可以监听showCount去更新页面，实现onShow的功能。

<template>
	<view class="content">
		<!-- 工作台 -->
		<staging v-if="PageCur=='home'" :isShow="PageCur=='home'" :showCount="showCount" />
		<!-- 应用 -->
		<application v-if="PageCur=='application'" :isShow="PageCur=='application'" :showCount="showCount" />
		<!-- 设备 -->
		<device v-if="PageCur=='device'" :isShow="PageCur=='device'" :showCount="showCount" />
		<!-- wode -->
		<mine v-if="PageCur=='mine'" :isShow="PageCur=='mine'" :showCount="showCount" />
		
		<view class="cu-bar tabbar bg-white shadow foot">
			<!-- 工作台tab -->
			<view :class="PageCur=='home'?'action text-primary':'action text-gray'" @click="NavChange" data-cur="home">
				<template v-if="PageCur=='home'">
					<image class="tabbar-image" mode="aspectFit" :src="homeActive"></image>
				</template>
				<template v-else>
					<image class="tabbar-image" mode="aspectFit" :src="homeDefault"></image>
				</template>
				工作台
			</view>
			<!-- 应用tab -->
			<view :class="PageCur=='application'?'action text-primary':'action text-gray'" @click="NavChange" data-cur="application">
				<template v-if="PageCur=='application'">
					<image class="tabbar-image" mode="aspectFit" :src="workActive"></image>
				</template>
				<template v-else>
					<image class="tabbar-image" mode="aspectFit" :src="workDefault"></image>
				</template>
				应用
			</view>
 
			<!-- 设备tab -->
			<view :class="PageCur=='device'?'action text-primary':'action text-gray'" @click="NavChange" data-cur="device">
				<template v-if="PageCur=='device'">
					<image class="tabbar-image" mode="aspectFit" :src="deviceActive"></image>
				</template>
				<template v-else>
					<image class="tabbar-image" mode="aspectFit" :src="deviceDefault"></image>
				</template>
				设备
			</view>
			<view :class="PageCur=='mine'?'action text-primary':'action text-gray'" @click="NavChange" data-cur="mine">
				<template v-if="PageCur=='mine'">
					<image class="tabbar-image" mode="aspectFit" :src="mineActive"></image>
				</template>
				<template v-else>
					<image class="tabbar-image" mode="aspectFit" :src="mineDefault"></image>
				</template>
				我的
			</view>
		</view>
	</view>
</template>
 
<script>
	import { checkLoginTimeout } from '@/utils/auth.js';
	import homeActive from '@/static/images/tabbar/home_.png';
	import homeDefault from '@/static/images/tabbar/home.png';
	import workActive from '@/static/images/tabbar/work_.png';
	import workDefault from '@/static/images/tabbar/work.png';
	import deviceActive from '@/static/images/tabbar/device_.png';
	import deviceDefault from '@/static/images/tabbar/device.png';
	import mineActive from '@/static/images/tabbar/mine_.png';
	import mineDefault from '@/static/images/tabbar/mine.png';
	
	// 工作台
	import staging from './staging/index.vue';
	// 应用
	import application from './application/index.vue';
	// 设备
	import device from './device/index.vue';
	// 我的
	import mine from './mine/index.vue';
 
	export default {
		components: {
			staging,
			application,
			device,
			mine
		},
		data() {
			return {
				PageCur: 'home',
				showCount: null,
 
				homeActive,
				homeDefault,
				workActive,
				workDefault,
				deviceActive,
				deviceDefault,
				mineActive,
				mineDefault,
			}
		},
		onLoad: function(option) {
			console.log('onLoad')
			this.PageCur = option?.page || 'home';
		},
		onShow() {
			console.log('onShow')
			checkLoginTimeout();
			this.showCount = this.showCount === null ? 0 : this.showCount + 1;
		},
		methods: {
			NavChange: function(e) {
				this.showCount = 0;
				this.PageCur = e.currentTarget.dataset.cur;
			},
		}
	}
</script>
 
<style>
	.tabbar-image {
		height: 72upx;
		width: 72upx;
		display: block;
		margin: auto;
	}
</style>
 
 
//在staging 里，接收showCount，并watch它
props:{
			showCount:{
				typeof:[String,Number],
			}
		},
watch:{
			 showCount(){
				this.getRecord()
			}
		}