water_affairs/pages/index/index.vue

<template>
	<view class="container">
		<tab-control ref="tabControl" :active='opentabControl' />
		<home ref="Home" v-show="PageCur == 'Home'" />
		<facility ref="Map" :tabHeight="tabHeight" v-show="PageCur == 'Map'" />
		<message ref="Message" v-show="PageCur == 'Message'" />
		<mine ref="Mine" v-show="PageCur == 'Mine'" />
		<view class="cu-bar tabbar bg-white foot" style="z-index: 100000;">
			<!-- bg-black -->
			<view @click="changePage('Home')" :class="PageCur == 'Home' ? 'action pitch-on-color' : 'action text-gray'">
				<view class="iconfont" :class="PageCur == 'Home' ? 'icon-shouye-xuanzhong' : 'icon-shouye-weixuanzhong'" />
				首页
			</view>
			<view @click="changePage('Map')" :class="PageCur == 'Map' ? 'action pitch-on-color' : 'action text-gray'">
				<view class="iconfont" :class="PageCur == 'Map' ? 'icon-ditu-xuanzhong' : 'icon-ditu-weixuanzhong'" /> 地图
			</view>
			<view class="text-gray" @click.stop="opentabControl(true)">
				<button class="cu-btn cuIcon-add shadow more" style="background-color:#0B3F7E;color: #fff;"></button>
			</view>
			<view @click="changePage('Message')"
				:class="PageCur == 'Message' ? 'action pitch-on-color' : 'action text-gray'">
				<view class="iconfont" :class="PageCur == 'Message' ? 'icon-xiaoxi-xuanzhong' : 'icon-xiaoxi-weixuanzhong'">
					<!-- <view class="cu-tag badge">99</view> -->
				</view> 消息
			</view>
			<view @click="changePage('Mine')" :class="PageCur == 'Mine' ? 'action pitch-on-color' : 'action text-gray'">
				<view class="iconfont" :class="PageCur == 'Mine' ? 'icon-wode-xuanzhong' : 'icon-wode-weixuanzhong'" /> 我的
			</view>
		</view>
	</view>
</template>

<script>
import home from "./modules/home.vue";
import facility from "../facility/index.vue";
import message from "./modules/message.vue";
import mine from "./modules/mine.vue";
import tabControl from "./modules/bottomTabControl.vue";
export default {
	components: { home, facility, message, mine, tabControl },
	data() {
		return {
			PageCur: "Home",
			tabHeight: 98
		}
	},
	mounted() {
		this.getHeight('.cu-bar', this, false).then(res => {
			this.tabHeight = res.height
		})
		this.loadElement()
	},
	methods: {
		opentabControl(active) {
			if (this.$refs.tabControl.active !== active) this.$nextTick(() => this.$refs.tabControl.active = active);
		},
		changePage(page) {
			this.PageCur = page;
			this.opentabControl(false)
			this.loadElement()
		},
		loadElement(forcedUpdating) {
			let page = this.$refs[this.PageCur];
			if (page.uninitialized || forcedUpdating) page.init();
		}
	}
}
</script>

<style lang="scss" scoped></style>