community-front/pages/index/index.vue

<template>
	<view class="volunteer-day-container">
		<home-page-nav></home-page-nav>
		<!-- 顶部通知栏 -->
		<volunteer-header></volunteer-header>
		
		<!-- 志愿者排行榜 -->
		<volunteer-ranking ref="rankRef"></volunteer-ranking>
		
		<!-- 功能导航 -->
		<volunteer-features></volunteer-features>
		
		<!-- 推荐活动 -->
		<recommended-activities ref="recommendedActivities"></recommended-activities>
	</view>
</template>

<script>
	import VolunteerHeader from '@/pages/components/index/VolunteerHeader.vue';
	import VolunteerRanking from '@/pages/components/index/VolunteerRanking.vue';
	import VolunteerFeatures from '@/pages/components/index/VolunteerFeatures.vue';
	import RecommendedActivities from '@/pages/components/index/RecommendedActivities.vue';
	import HomePageNav from '@/pages/components/HomePageNav.vue';
	
	export default {
		components: {
			VolunteerHeader,
			VolunteerRanking,
			VolunteerFeatures,
			RecommendedActivities,
			HomePageNav
		},
		data() {
			return {}
		},
		methods: {
			getPageData() {
				 this.$refs.rankRef.getVolunteerRanking();
			}
		},
		onShow() {
			// 页面加载时获取数据
			this.getPageData();
			// 刷新推荐活动
			this.$refs.recommendedActivities.getActivityList()
		},
		async onPullDownRefresh() {
			// 下拉刷新时获取数据
			await this.getPageData();

			await this.$refs.recommendedActivities.getActivityList()
			// 刷新完成后调用
			uni.stopPullDownRefresh();

		},


	}
</script>

<style lang="scss" scoped>
	.volunteer-day-container {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding-bottom: 30rpx;
	}
</style>