app-aiqvyou/src/app/tab1/tab1.page.ts

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

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {
  // 上方轮播图
  public attractions = [
    { image: "https://tse3-mm.cn.bing.net/th/id/OIP-C.5HjektOIikSBU1vw0JVKwgHaE8?w=305&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7", name: '景点1' },
    { image: "https://tse3-mm.cn.bing.net/th/id/OIP-C.5HjektOIikSBU1vw0JVKwgHaE8?w=305&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7", name: '景点2' },
    { image: "https://tse3-mm.cn.bing.net/th/id/OIP-C.5HjektOIikSBU1vw0JVKwgHaE8?w=305&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7", name: '景点3' }
  ];

  //多图标卡片
  cards = [
    { icon: 'map-outline', title: '找攻略' },
    { icon: 'flame-outline', title: '当季热门' },
    { icon: 'newspaper-outline', title: '看游记' },
    { icon: 'people-outline', title: '找搭子' },
    { icon: 'bed-outline', title: '订酒店' },
    { icon: 'happy-outline', title: '亲子游' },
    { icon: 'car-outline', title: '自驾游' },
    { icon: 'flag-outline', title: '国内游' },
    { icon: 'airplane-outline', title: '海外游' },
    { icon: 'compass-outline', title: '周边游' }
  ];

  chunkedCards: any[] = [];

  constructor() {
    this.chunkSize(this.cards);
  }

  chunkSize(cards: any[]) {
    const chunkSize: number = 5;
    this.chunkedCards = [];
    for (let i: number = 0; i < cards.length; i += chunkSize) {
      this.chunkedCards.push(cards.slice(i, i + chunkSize));
    }
  }

  ngOnInit() {
    const swiper = new Swiper('.swiper-container', {
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  }
}