|
@@ -1,72 +1,41 @@
|
|
import { Component } from '@angular/core';
|
|
import { Component } from '@angular/core';
|
|
|
|
|
|
|
|
+interface Photo {
|
|
|
|
+ id: number;
|
|
|
|
+ url: string;
|
|
|
|
+ tags: string[];
|
|
|
|
+}
|
|
|
|
+
|
|
@Component({
|
|
@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 {
|
|
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;
|
|
|
|
- }
|
|
|
|
}
|
|
}
|