app-myapp/app/tab1/tab1.page.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss'],
})
export class Tab1Page {

  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(); // 获取搜索词并去除首尾空格

    if (this.searchTerm !== '') {
      // 模拟简单的搜索结果
      this.searchResults = [
        { title: '搜索结果1' },
        { title: '搜索结果2' },
        // 根据搜索逻辑添加更多搜索结果
      ];
    } else {
      this.searchResults = []; // 清空搜索结果数组
    }
  }

  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;
    }
    this.showContent = true;
  }
}