tab3

src/app/tab1/tab1.module.ts

@@ -9,7 +9,7 @@ import { Tab1PageRoutingModule } from './tab1-routing.module';
 
 @NgModule({
   imports: [
-    IonicModule,
+    IonicModule, 
     CommonModule,
     FormsModule,
     // ExploreContainerComponentModule,

src/app/tab3/tab3.page.html

@@ -6,6 +6,7 @@
       <ion-button slot="end"  (click)="openSettingsPage()">
         <ion-icon name="settings-outline"></ion-icon>
       </ion-button>
+      
   </ion-toolbar>
 </ion-header>
 
@@ -16,7 +17,7 @@
     </ion-card-header>
     <ion-card-content>
       <ion-avatar slot="start">
-        <ion-img src="Assets/avatar.jpg"></ion-img>
+        <ion-img src="https://wx4.sinaimg.cn/mw690/006GBbhsgy1hqa92rfo7tj30qo0qo76t.jpg"></ion-img>
       </ion-avatar>
       <ion-label>用户名</ion-label>
       <ion-label>标签</ion-label>
@@ -45,16 +46,114 @@
     </ion-segment-button>
    </ion-segment>
    <div *ngIf="activeTab === 'explore'" >
-    1
+    <ion-item>
+      <ion-avatar slot="start">
+        <ion-img src="https://ww2.sinaimg.cn/mw690/007QvzfIly1hraz8xoasnj30u00u0wh6.jpg"></ion-img>
+      </ion-avatar>
+      <ion-label>
+        <h2>用户名</h2>
+        <p>这是一条评论内容</p>
+      </ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-avatar slot="start">
+        <ion-img src="https://img2.baidu.com/it/u=2453029165,1962533557&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"></ion-img>
+      </ion-avatar>
+      <ion-label>
+        <h2>回复者用户名</h2>
+        <p>这是一条回复内容</p>
+      </ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-input placeholder="添加评论"></ion-input>
+      <ion-button slot="end" (click)="sendComment()">
+        <ion-icon name="send"></ion-icon>
+      </ion-button>
+    </ion-item>
    </div>
    <div *ngIf="activeTab === 'video'">
-    2
+    <ion-item>
+      <ion-avatar slot="start">
+        <ion-img src="assets/avatar1.jpg"></ion-img>
+      </ion-avatar>
+      <ion-label>
+        <h2>用户名1</h2>
+        <p>这是一条内容1</p>
+      </ion-label>
+      <ion-buttons slot="end">
+        <ion-button (click)="likePost(1)">
+          <ion-icon name="heart" [color]="isPostLiked(1) ? 'danger' : 'medium'"></ion-icon>
+        </ion-button>
+        <ion-button (click)="toggleFavorite(1)">
+          <ion-icon name="star" [color]="isPostFavorite(1) ? 'warning' : 'medium'"></ion-icon>
+        </ion-button>
+      </ion-buttons>
+    </ion-item>
+    <ion-item>
+      <ion-avatar slot="start">
+        <ion-img src="assets/avatar2.jpg"></ion-img>
+      </ion-avatar>
+      <ion-label>
+        <h2>用户名2</h2>
+        <p>这是一条内容2</p>
+      </ion-label>
+      <ion-buttons slot="end">
+        <ion-button (click)="likePost(2)">
+          <ion-icon name="heart" [color]="isPostLiked(2) ? 'danger' : 'medium'"></ion-icon>
+        </ion-button>
+        <ion-button (click)="toggleFavorite(2)">
+          <ion-icon name="star" [color]="isPostFavorite(2) ? 'warning' : 'medium'"></ion-icon>
+        </ion-button>
+      </ion-buttons>
+    </ion-item>  
    </div>
    <div *ngIf="activeTab === 'search'">
-    3
+    <ion-item>
+      <ion-avatar slot="start">
+        <ion-img src="assets/avatar1.jpg"></ion-img>
+      </ion-avatar>
+      <ion-label>
+        <h2>用户名1</h2>
+        <p>这是一条内容1</p>
+      </ion-label>
+      <ion-button slot="end" (click)="toggleFollow(1)" color="primary" [fill]="isUserFollowed(1) ? 'solid' : 'outline'">
+        {{ isUserFollowed(1) ? '已关注' : '关注' }}
+      </ion-button>
+    </ion-item>
+
+    <ion-item>
+      <ion-avatar slot="start">
+        <ion-img src="assets/avatar2.jpg"></ion-img>
+      </ion-avatar>
+      <ion-label>
+        <h2>用户名2</h2>
+        <p>这是一条内容2</p>
+      </ion-label>
+      <ion-button slot="end" (click)="toggleFollow(2)" color="primary" [fill]="isUserFollowed(2) ? 'solid' : 'outline'">
+        {{ isUserFollowed(2) ? '已关注' : '关注' }}
+      </ion-button>
+    </ion-item>
    </div>
    <div *ngIf="activeTab === 'system'">
-    4
+    <ion-item>
+      <ion-avatar slot="start">
+        <ion-img src="assets/avatar1.jpg"></ion-img>
+      </ion-avatar>
+      <ion-label>
+        <h2>系统消息标题1</h2>
+        <p>这是一条系统消息内容1</p>
+      </ion-label>
+    </ion-item>
+
+    <ion-item>
+      <ion-avatar slot="start">
+        <ion-img src="assets/avatar2.jpg"></ion-img>
+      </ion-avatar>
+      <ion-label>
+        <h2>系统消息标题2</h2>
+        <p>这是一条系统消息内容2</p>
+      </ion-label>
+    </ion-item>
    </div>
   </div>
 

src/app/tab3/tab3.page.scss

@@ -10,3 +10,4 @@ ion-card-title {
 ion-avatar {
   margin-right: 10px;
 }
+

src/app/tab3/tab3.page.ts

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
+import { ToastController } from '@ionic/angular';
 
 
 @Component({
@@ -9,21 +10,66 @@ import { Router } from '@angular/router';
 })
 export class Tab3Page {
 
-  constructor(private router: Router) {}
+  constructor(private toastController: ToastController) {}
 
   activeTab:string = 'explore';
+  likedPosts: number[] = [];
+  favoritePosts: number[] = [];
+  followedUsers: number[] = [];
   changeTab(event:any){
     this.activeTab = event.detail.value
+    
   }
-  openFeedbackPage() {
-    // 打开反馈页面
-  }
-  
-
   openSettingsPage() {
     // 打开设置页面
   }
-  navigateToPage(page: string) {
-    this.router.navigate([`/tabs/${page}`]);
+  // navigateToPage(page: string) {
+  //   this.router.navigate([`/tabs/${page}`]);
+  // }
+  sendComment() {
+    // 模拟发送评论的操作
+    this.presentToast('评论已发送');
+    
+  }
+  async presentToast(message: string) {
+    const toast = await this.toastController.create({
+      message: message,
+      duration: 2000
+    });
+    toast.present();
+  }
+  likePost(postId: number) {
+    if (this.isPostLiked(postId)) {
+      this.likedPosts = this.likedPosts.filter(id => id !== postId);
+    } else {
+      this.likedPosts.push(postId);
+    }
+  }
+
+  isPostLiked(postId: number): boolean {
+    return this.likedPosts.includes(postId);
+  }
+
+  toggleFavorite(postId: number) {
+    if (this.isPostFavorite(postId)) {
+      this.favoritePosts = this.favoritePosts.filter(id => id !== postId);
+    } else {
+      this.favoritePosts.push(postId);
+    }
+  }
+
+  isPostFavorite(postId: number): boolean {
+    return this.favoritePosts.includes(postId);
+  }
+  toggleFollow(userId: number) {
+    if (this.isUserFollowed(userId)) {
+      this.followedUsers = this.followedUsers.filter(id => id !== userId);
+    } else {
+      this.followedUsers.push(userId);
+    }
+  }
+
+  isUserFollowed(userId: number): boolean {
+    return this.followedUsers.includes(userId);
   }
 }