tab1change

app/tab1/tab1.module.ts

@@ -1,4 +1,5 @@
 import { IonicModule } from '@ionic/angular';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';//新加
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
@@ -15,6 +16,7 @@ import { Tab1PageRoutingModule } from './tab1-routing.module';
     ExploreContainerComponentModule,
     Tab1PageRoutingModule
   ],
-  declarations: [Tab1Page]
+  declarations: [Tab1Page],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]//新加
 })
 export class Tab1PageModule {}

app/tab1/tab1.page.html

@@ -1,23 +1,17 @@
-<ion-header [translucent]="true">
+<ion-header>
   <ion-toolbar>
-    <ion-searchbar placeholder="搜索..." debounce="500" (ionInput)="onSearch($event)"></ion-searchbar>
+      <ion-title>
+          Photos
+      </ion-title>
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
-  <ion-grid>
-    <ion-row>
-      <ion-col size="12">
-        <ion-list>
-          <ion-item *ngFor="let result of searchResults">
-            <!-- 显示搜索结果内容 -->
-            {{ result.title }}
-          </ion-item>
-          <ion-item *ngIf="searchResults.length === 0 && searchTerm">
-            没有找到匹配结果
-          </ion-item>
-        </ion-list>
-      </ion-col>
-    </ion-row>
-  </ion-grid>
+<ion-content>
+  <ion-searchbar (ionInput)="onSearch($event)"></ion-searchbar>
+
+  <div class="photo-container">
+      <div class="photo-wrapper" *ngFor="let photo of displayedPhotos">
+          <ion-img [src]="photo.url" alt="Photo"></ion-img>
+      </div>
+  </div>
 </ion-content>

app/tab1/tab1.page.scss

@@ -1,10 +1,32 @@
+ion-content {
+  --ion-background-color: #f2f2f2;
+  padding: 16px;
+}
+
 ion-searchbar {
-    position: sticky;
-    top: 0;
-    z-index: 100;
-  }
-  
-  ion-content {
-    --ion-background-color: #f2f2f2;
-  }
-  
+  margin-bottom: 16px;
+}
+
+.photo-container {
+  display: flex;
+  flex-wrap: wrap; /* 允许图片换行 */
+  gap: 8px; /* 图片之间的空隙 */
+  justify-content: flex-start; /* 左对齐排列 */
+}
+
+.photo-wrapper {
+  width: calc(50% - 8px); /* 每张图片容器宽度为父容器宽度的一半减去间隙 */
+  margin-bottom: 8px; /* 底部间隙 */
+  box-sizing: border-box; /* 包含内边距和边框的大小 */
+}
+
+.photo-wrapper:nth-child(2n+1) {
+  margin-right: 8px; /* 每行第一张图片右侧间隙 */
+}
+
+ion-img {
+  width: 100%; /* 图片宽度 100% */
+  height: auto; /* 自动调整高度 */
+  object-fit: cover; /* 裁剪图片以填充容器 */
+  border-radius: 8px; /* 图片圆角 */
+}

app/tab1/tab1.page.ts

@@ -1,72 +1,41 @@
 import { Component } from '@angular/core';
 
+interface Photo {
+    id: number;
+    url: string;
+    tags: string[];
+}
+
 @Component({
-  selector: 'app-tab1',
-  templateUrl: 'tab1.page.html',
-  styleUrls: ['tab1.page.scss'],
+    selector: 'app-tab1',
+    templateUrl: 'tab1.page.html',
+    styleUrls: ['tab1.page.scss'],
 })
 export class Tab1Page {
+    photos: Photo[] = [
+        { id: 1, url: 'assets/photos/photo1.jpg', tags: ['赛马娘', '东商改革'] },
+        { id: 2, url: 'assets/photos/photo2.jpg', tags: ['赛马娘', '东海帝皇','目白麦昆'] },
+        { id: 3, url: 'assets/photos/photo3.jpg', tags: ['赛马娘', '东海帝皇'] },
+        { id: 4, url: 'assets/photos/photo4.jpg', tags: ['赛马娘', '目白麦昆'] },
+        { id: 5, url: 'assets/photos/photo5.jpg', tags: ['赛马娘', '草上飞'] },
+        { id: 6, url: 'assets/photos/photo6.jpg', tags: ['赛马娘', '北部玄驹'] },
+        // 添加更多照片
+    ];
 
-  searchResults: { title: string }[] = []; // 存储搜索结果
-  searchTerm: string = ''; // 存储当前搜索词
-  slides: { imgUrl: string }[] = []; // 存储轮播图数据
-  slideOpts = {
-    initialSlide: 0,
-    speed: 400,
-    autoplay: {
-      delay: 3000
-    },
-    loop: true
-  };
-
-  isSearchFocused: boolean = false; // 跟踪搜索框的聚焦状态
-  showCarousel: boolean = true; // 控制轮播图的显示
-  showContent: boolean = true; // 控制内容的显示
-
-  constructor() {
-    this.initializeSlides(); // 初始化轮播图数据
-  }
-
-  onSearch(event: any) {
-    this.searchTerm = event.target.value.trim(); // 获取搜索词并去除首尾空格
+    displayedPhotos: Photo[] = [];
 
-    if (this.searchTerm !== '') {
-      // 模拟简单的搜索结果
-      this.searchResults = [
-        { title: '搜索结果1' },
-        { title: '搜索结果2' },
-        // 根据搜索逻辑添加更多搜索结果
-      ];
-    } else {
-      this.searchResults = []; // 清空搜索结果数组
+    constructor() {
+        this.displayedPhotos = [...this.photos]; // 初始显示所有照片
     }
-  }
-
-  initializeSlides() {
-    // 初始化轮播图数据，使用 assets 文件夹下的图片
-    this.slides = [
-      { imgUrl: 'assets/carousel-item1.jpg' },
-      { imgUrl: 'assets/carousel-item2.jpg' },
-      { imgUrl: 'assets/carousel-item3.jpg' },
-      { imgUrl: 'assets/carousel-item4.jpg' },
-      { imgUrl: 'assets/carousel-item5.jpg' },
-      { imgUrl: 'assets/carousel-item6.jpg' },
-    ];
-  }
-
-  onSearchFocus() {
-    // 当搜索框聚焦时，隐藏轮播图和其他内容
-    this.isSearchFocused = true;
-    this.showCarousel = false;
-    this.showContent = false;
-  }
 
-  onSearchBlur() {
-    // 当搜索框失去焦点时，根据搜索词的存在情况显示轮播图或内容
-    this.isSearchFocused = false;
-    if (this.searchTerm === '') {
-      this.showCarousel = true;
+    onSearch(event: CustomEvent) {
+        const searchTerm = (event.target as HTMLInputElement).value.toLowerCase().trim();
+        if (searchTerm === '') {
+            this.displayedPhotos = [...this.photos]; // 重置显示所有照片
+        } else {
+            this.displayedPhotos = this.photos.filter(photo =>
+                photo.tags.some(tag => tag.toLowerCase().includes(searchTerm))
+            );
+        }
     }
-    this.showContent = true;
-  }
 }