TalentService-mobile/pages/index/index.vue

<template>
	<view>
		<view class="u-page upage">
			<Home ref="home" :moduleList="moduleList" @changeLoading="changeLoading" :bgColor="getBgColor" v-show="current===0" />
			<PolicyList :moduleList="moduleList" ref="policy" style="height: 100vh" v-show="current===1" />
			<ActivityList :moduleList="moduleList" ref="activity" v-show="current===2" />
			<My ref="my" v-show="current===3" />
		</view>
		<u-tabbar @change="beforeSwitch" :value="current" activeColor="#94ceff" :list="list"></u-tabbar>
		<Loading :show="loading" />
	</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,// 页面是否滚动到顶
				loading: true,// 加载
				moduleList: [],
			};
		},
		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;
		},
		async onLoad() {
			await this.getModule();
			this.beforeSwitch(this.current);
		},
		onShow() {
			let index = uni.getStorageSync('pageIndex');
			this.current = index?index:0;
			this.beforeSwitch(this.current);
		},
		onHide(){
			uni.setStorageSync('pageIndex',this.current);
		},
		// 上拉刷新
		onPullDownRefresh() {
			try{
				if(this.current === 0){
					this.$refs['home'].getHomeData();
				} else if(this.current === 1){
					this.$refs['policy'].onRefresh();
				} else if(this.current === 2){
					this.$refs['activity'].onRefresh();
				}
			}catch(e){}
			finally{
				uni.stopPullDownRefresh();
			}
		},
		// 滑动到底
		onReachBottom() {
			if(this.current === 1){
				this.$refs['policy'].onreachBottom();
			} else if(this.current === 2){
				this.$refs['activity'].onreachBottom();
			}
		},
		methods: {
			// 获取模块
			async getModule(){
				// 获取文章模块
				let moduleRes = await this.$api.getAllModule();
				if(moduleRes.success){
					this.moduleList = moduleRes.data;
				}
			},
			async beforeSwitch(index){
				try{
					this.current = index;
					// this.loading = true;
					uni.setNavigationBarTitle({
						title: this.list[index].text
					});
					switch(index){
						case 0:
							await this.$refs['home'].getHomeData();
							break;
						case 1:
							await this.$refs['policy'].init();
							break;
						case 2:
							await this.$refs['activity'].init();
							break;
						case 3:
							await this.$refs['my'].refresh();
							break;
					}
				}catch(e){
				}finally{
					this.loading = false;
					return true;
				}
			},
			changeLoading(show){
				this.loading = show;
			}
		}
	}
</script>

<style lang="scss" scoped>
.upage{
	width: 100%;
	height: calc(100% - 50px);
}
</style>