modify

src/app/home/home.page.html

@@ -5,17 +5,27 @@
 </ion-header>
 
 <ion-content>
+  <!-- 下拉刷新组件 -->
+  <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
+    <ion-refresher-content
+      pullingIcon="arrow-down"
+      refreshingSpinner="circles"
+      pullingText="下拉刷新"
+      refreshingText="刷新中...">
+    </ion-refresher-content>
+  </ion-refresher>
+
   <!-- 顶部导航栏 -->
-  <ion-segment value="recommendations">
+  <ion-segment value="recommendations" (ionChange)="onSegmentChanged($event)">
     <ion-segment-button value="recommendations">
       <ion-label>推荐</ion-label>
     </ion-segment-button>
-    <ion-segment-button value="following">
-      <ion-label>关注</ion-label>
-    </ion-segment-button>
     <ion-segment-button value="hot">
       <ion-label>热门</ion-label>
     </ion-segment-button>
+    <ion-segment-button value="newest">
+      <ion-label>最新</ion-label>
+    </ion-segment-button>
   </ion-segment>
 
   <!-- 搜索框 -->

src/app/home/home.page.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import * as Parse from 'parse';
+import { IonRefresher } from '@ionic/angular';
 
 @Component({
   selector: 'app-home',
@@ -10,7 +11,7 @@ import * as Parse from 'parse';
 export class HomePage implements OnInit {
   items: any[] = [];
   filteredItems: any[] = [];
-  newPostId: string = '';
+  selectedSegment: string = 'recommendations';
 
   constructor(private router: Router) {}
 
@@ -18,6 +19,10 @@ export class HomePage implements OnInit {
     this.fetchPosts();
   }
 
+  ionViewWillEnter() {
+    this.fetchPosts();
+  }
+
   async fetchPosts() {
     const Post = Parse.Object.extend("Post240709");
     const query = new Parse.Query(Post);
@@ -30,14 +35,32 @@ export class HomePage implements OnInit {
         author: post.get('author'),
         image: post.get('image'),
         description: post.get('description'),
+        likes: post.get('likes') || 0,
+        comments: post.get('comments') || 0,
+        createdAt: post.createdAt,
         footer: `${post.get('likes') || 0} 赞同 · ${post.get('comments') || 0} 评论`
       }));
-      this.filteredItems = [...this.items]; // 初始化时展示全部帖子
+      this.updateFilteredItems();
     } catch (error) {
       console.error("Error while fetching posts", error);
     }
   }
 
+  updateFilteredItems() {
+    if (this.selectedSegment === 'recommendations') {
+      this.filteredItems = [...this.items];
+    } else if (this.selectedSegment === 'hot') {
+      this.filteredItems = [...this.items].sort((a, b) => b.likes - a.likes);
+    } else if (this.selectedSegment === 'newest') {
+      this.filteredItems = [...this.items].sort((a, b) => b.createdAt - a.createdAt);
+    }
+  }
+
+  onSegmentChanged(event: any) {
+    this.selectedSegment = event.detail.value;
+    this.updateFilteredItems();
+  }
+
   onSearch(event: any) {
     const query = event.target.value.toLowerCase();
     this.filteredItems = this.items.filter(item => 
@@ -105,4 +128,12 @@ export class HomePage implements OnInit {
       return 0;
     }
   }
+
+  async doRefresh(event: CustomEvent) {
+    await this.fetchPosts();
+    const refresher = event.target as unknown as IonRefresher;
+    if (refresher) {
+      refresher.complete();
+    }
+  }
 }