<template>
	<view>
		<view class="u-page">
			<Home :bgColor="getBgColor" v-show="current===0" />
			<PolicyList v-show="current===1" />
			<ActivityList v-show="current===2" />
			<My v-show="current===3" />
		</view>
		<u-tabbar v-model="current" activeColor="#94ceff" :list="list"></u-tabbar>
	</view>
</template>

<script>
	import Home from '@/pages/home/home.vue';
	import PolicyList from '@/pages/policy/policyList.vue';
	import ActivityList from '@/pages/activity/activityList.vue';
	import My from '@/pages/my/my.vue';
	export default {
		components: {
			Home,PolicyList,ActivityList,My
		},
		data() {
			return {
				list: [{
						iconPath: "home",
						selectedIconPath: "home-fill",
						text: '首页',
						customIcon: false,
					},
					{
						iconPath: "chat",
						selectedIconPath: "chat-fill",
						text: '最新政策',
						customIcon: false,
					},
					{
						iconPath: "grid",
						selectedIconPath: "grid-fill",
						text: '人才活动',
						customIcon: false,
					},
					{
						iconPath: "account",
						selectedIconPath: "account-fill",
						text: '我的',
						customIcon: false,
					}
				],
				menuHeight:uni.getMenuButtonBoundingClientRect(),
				current: 0,// 当前页
				topLevel: 0,// 页面是否滚动到顶
			};
		},
		computed:{
			getBgColor(){
				return `rgba(75, 170, 251,${this.topLevel})`;
			}
		},
		onPageScroll(e) {
			const level = e.scrollTop/this.menuHeight.height;
			if(level<=1) this.topLevel = level;
			else this.topLevel = 1;
		},
		methods: {

		}
	}
</script>

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