APPmy/src/app/tab1/tab1.page.ts

import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';

import Swiper from 'swiper';


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

  selectedSegment: string = 'explore';
  @ViewChild("slide1Comp") slide1Comp:ElementRef |undefined

  constructor() {}

  ngOnInit() {
    // 延迟500毫秒加载
    setTimeout(() => {
      this.initSwiper();
    }, 500);
  }
  
  // 初始化轮播图
  slide1:Swiper|undefined
  initSwiper(){
  console.log(this.slide1Comp)
    this.slide1 = new Swiper(this.slide1Comp?.nativeElement, {
      loop:true,
      autoplay:{
        delay:500,
      },
      mousewheel: {
        forceToAxis: true,
      },
      pagination:{
        el:".swiper-pagination",
        clickable:true
      }
    });
  }


  segmentChanged(event: CustomEvent) {
    this.selectedSegment = event.detail.value;
  }

  // 在此处定义和初始化数据
  contentList = [
    { image: 'https://img.zcool.cn/community/01df555d65edcea8012187f4e41c2f.jpg@2o.jpg', title: '示例标题1', user: '用户A', likes: 10, comments: 5, tags: '标签1, 标签2' },
    { image: 'https://img.zcool.cn/community/01df555d65edcea8012187f4e41c2f.jpg@2o.jpg', title: '示例标题2', user: '用户B', likes: 20, comments: 8, tags: '标签3, 标签4' },
    // 添加更多示例数据
  ];
  
  videos: { videoUrl: string, title: string, description: string }[] = [
    {
      videoUrl: 'assets/videos/video2.mp4',
      title: '房屋装修设计指南',
      description: '了解如何打造理想的家居装修风格'
    },
    {
      videoUrl: 'assets/videos/video2.mp4',
      title: '家具选购攻略',
      description: '挑选适合你家的家具，打造舒适空间'
    },
    {
      videoUrl: 'assets/videos/video3.mp4',
      title: '客厅装饰灵感',
      description: '打造温馨舒适的客厅装饰'
    },
    {
      videoUrl: 'assets/videos/video4.mp4',
      title: '卧室设计技巧',
      description: '掌握卧室设计的实用技巧'
    },
    {
      videoUrl: 'assets/videos/video5.mp4',
      title: '厨房装修实例',
      description: '欣赏不同风格的厨房装修案例'
    },
    {
      videoUrl: 'assets/videos/video6.mp4',
      title: '阳台花园布置',
      description: '打造美丽的阳台花园'
    },
    {
      videoUrl: 'assets/videos/video7.mp4',
      title: '书房设计灵感',
      description: '打造宁静的读书空间'
    },
    {
      videoUrl: 'assets/videos/video8.mp4',
      title: '浴室装修技巧',
      description: '打造舒适的浴室空间'
    },
    {
      videoUrl: 'assets/videos/video9.mp4',
      title: '家居风水指南',
      description: '了解家居风水的重要性'
    },
    {
      videoUrl: 'assets/videos/video10.mp4',
      title: '家庭影院布置',
      description: '打造私人家庭影院'
    }
    // 可以根据需要添加更多视频数据
  ];



}