头像

angular.json

@@ -136,7 +136,8 @@
   "cli": {
     "schematicCollections": [
       "@ionic/angular-toolkit"
-    ]
+    ],
+    "analytics": false
   },
   "schematics": {
     "@ionic/angular-toolkit:component": {

src/app/me/me-routing.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { MePage } from './me.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: MePage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class MePageRoutingModule {}

src/app/me/me.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { IonicModule } from '@ionic/angular';
+import { MePageRoutingModule } from './me-routing.module';
+import { MePage } from './me.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    MePageRoutingModule
+  ],
+  declarations: [MePage]
+})
+export class MePageModule {}

src/app/me/me.page.html

@@ -0,0 +1,19 @@
+<ion-content>
+  <ion-card>
+    <div class="profile-container">  
+      <ion-avatar class="profile-avatar">  
+        <ion-img src="assets\me\bd787297238e6d83cef49499c39c313c_1.jpg"></ion-img>  
+      </ion-avatar>  
+      <div class="profile-info">  
+        <h2>用户名</h2>  
+        <p>微信号: wechat_id</p>  
+      </div>  
+    </div>  
+  </ion-card>
+  <ion-card class="profile-container">
+    <h2>留影</h2>
+  </ion-card>
+</ion-content>
+
+
+

src/app/me/me.page.scss

@@ -0,0 +1,26 @@
+.profile-container {  
+    display: flex;  
+    flex-direction: column;  
+    align-items: center;  
+    text-align: center;  
+  }  
+    
+  .profile-avatar {  
+    width: 150px;  
+    height: 150px;  
+    margin-bottom: 15px;  
+    
+    img {  
+      width: 100%;  
+      height: 100%;  
+      border-radius: 50%; // 使图片圆形  
+      object-fit: cover; // 图片填充整个容器  
+    }  
+  }  
+    
+  .profile-info {  
+    width: 100%;  
+    display: flex;  
+    flex-direction: column;  
+    align-items: center;  
+  }  

src/app/me/me.page.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MePage } from './me.page';
+
+describe('MePage', () => {
+  let component: MePage;
+  let fixture: ComponentFixture<MePage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MePage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/me/me.page.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-me',
+  templateUrl: './me.page.html',
+  styleUrls: ['./me.page.scss'],
+})
+export class MePage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/me/tab3-routing.module.ts

@@ -1,16 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { Tab3Page } from './tab3.page';
-
-const routes: Routes = [
-  {
-    path: '',
-    component: Tab3Page,
-  }
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class Tab3PageRoutingModule {}

src/app/me/tab3.module.ts

@@ -1,20 +0,0 @@
-import { IonicModule } from '@ionic/angular';
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { Tab3Page } from './tab3.page';
-import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
-
-import { Tab3PageRoutingModule } from './tab3-routing.module';
-
-@NgModule({
-  imports: [
-    IonicModule,
-    CommonModule,
-    FormsModule,
-    ExploreContainerComponentModule,
-    Tab3PageRoutingModule
-  ],
-  declarations: [Tab3Page]
-})
-export class Tab3PageModule {}

src/app/me/tab3.page.html

@@ -1,17 +0,0 @@
-<ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>
-      Tab 3
-    </ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">Tab 3</ion-title>
-    </ion-toolbar>
-  </ion-header>
-
-  <app-explore-container name="Tab 3 page"></app-explore-container>
-</ion-content>

src/app/me/tab3.page.spec.ts

@@ -1,26 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { IonicModule } from '@ionic/angular';
-
-import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
-
-import { Tab3Page } from './tab3.page';
-
-describe('Tab3Page', () => {
-  let component: Tab3Page;
-  let fixture: ComponentFixture<Tab3Page>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [Tab3Page],
-      imports: [IonicModule.forRoot(), ExploreContainerComponentModule]
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(Tab3Page);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/me/tab3.page.ts

@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-tab3',
-  templateUrl: 'tab3.page.html',
-  styleUrls: ['tab3.page.scss']
-})
-export class Tab3Page {
-
-  constructor() {}
-
-}

src/app/tab1/tab1.page.html

@@ -5,19 +5,10 @@
     </ion-title>
     <ion-buttons slot="end">
       <ion-button>
-        <ion-icon name="search"></ion-icon>
+        <ion-icon name="search" (click)="toggleSearch()"></ion-icon>
       </ion-button>
     </ion-buttons>
+    
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">
-      </ion-title>
-    </ion-toolbar>
-  </ion-header>
-
-  <app-explore-container name="首页"></app-explore-container>
-</ion-content>

src/app/tab1/tab1.page.ts

@@ -7,6 +7,11 @@ import { Component } from '@angular/core';
 })
 export class Tab1Page {
 
+  isSearchVisible = false;  
+  searchTerm = '';
   constructor() {}
+  toggleSearch() {  
+    this.isSearchVisible = !this.isSearchVisible;  
+  }  
 
 }

src/app/tab2/tab2.page.html

@@ -1,17 +1 @@
-<ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>
-      Tab 2
-    </ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">Tab 2</ion-title>
-    </ion-toolbar>
-  </ion-header>
-
-  <app-explore-container name="Tab 2 page"></app-explore-container>
-</ion-content>
+ 

src/app/tab3/tab3.page.html

@@ -1,17 +0,0 @@
-<ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>
-      Tab 3
-    </ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">Tab 3</ion-title>
-    </ion-toolbar>
-  </ion-header>
-
-  <app-explore-container name="Tab 3 page"></app-explore-container>
-</ion-content>

src/app/tabs/tabs-routing.module.ts

@@ -19,6 +19,10 @@ const routes: Routes = [
         path: 'tab3',
         loadChildren: () => import('../tab3/tab3.module').then(m => m.Tab3PageModule)
       },
+      {
+        path: 'me',
+        loadChildren: () => import('../me/me.module').then(m => m.MePageModule)
+      },
       {
         path: '',
         redirectTo: '/tabs/tab1',

src/app/tabs/tabs.page.html

@@ -15,7 +15,7 @@
       <ion-icon aria-hidden="true" name="heart-half-outline"></ion-icon>
       <ion-label>互动</ion-label>
     </ion-tab-button>
-    <ion-tab-button tab="tab3" href="/tabs/me">
+    <ion-tab-button tab="me" href="/tabs/me">
       <ion-icon aria-hidden="true" name="person-outline"></ion-icon>
       <ion-label>我的</ion-label>
     </ion-tab-button>