fbySrcm_uniapp/pages/courseManage/index.vue

<template>
	<view>
		<view class="app-wrapper" :style="{height: bodyHeight}">
			<dataIndex v-if="templateView == 'dataIndex'"></dataIndex>
			<liveIndex v-show="templateView == 'liveIndex'"></liveIndex>
			<courseIndex v-show="templateView == 'courseIndex'"></courseIndex>
			<vipIndex v-show="templateView == 'vipIndex'"></vipIndex>
		</view>
		<view class="myTabBar x-f x-bc">
			<view class="myTabBar-item x-f y-f" @click="handleTab('dataIndex')">
				<image src="../../static/logo.png" mode="aspectFill"></image>
				<text>数据</text>
			</view>
			<view class="myTabBar-item x-f y-f" @click="handleTab('liveIndex')">
				<image src="../../static/logo.png" mode="aspectFill"></image>
				<text>直播课</text>
			</view>
			<view class="myTabBar-item x-f y-f" @click="handleTab('courseIndex')">
				<image src="../../static/logo.png" mode="aspectFill"></image>
				<text>训练营</text>
			</view>
			<view class="myTabBar-item x-f y-f" @click="handleTab('vipIndex')">
				<image src="../../static/logo.png" mode="aspectFill"></image>
				<text>会员</text>
			</view>
		</view>
	</view>
</template>

<script>
	import dataIndex from "./dataIndex/index.vue"
	import liveIndex from "./live/index.vue"
	import courseIndex from "./course/index.vue"
	import vipIndex from "./vip/index.vue"
	export default {
		components: {
			dataIndex,
			liveIndex,
			courseIndex,
			vipIndex
		},
		data() {
			return {
				templateView: 'vipIndex',
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				windowHeight: uni.getSystemInfoSync().windowHeight,
				bodyHeight: 0,
			}
		},
		onLoad() {
			this.bodyHeight = `calc(${this.windowHeight}px - 56px)` 
			uni.setNavigationBarTitle({
				title: '数据'
			});
		},
		methods: {
			handleTab(tem) {
				this.templateView = tem
			}
		}
	}
</script>

<style scoped lang="scss">
	.app-wrapper {
		width: 100%;
	}
	.myTabBar {
		height: 56px;
		border-top: 1px solid #f5f5f5;
		box-sizing: border-box;
		width: 100%;
		background-color: #fff;
		position: fixed;
		bottom: var(--window-bottom);
		left: 0;
		font-size: 10px;
		image {
			width: 24px;
			height: 24px;
			margin-bottom: 3px;
		}
		&-item {
			flex: 1;
		}
	}
</style>