ArkUI Swiper：轮播不是把卡片横着塞进去

今天我们用 Swiper 做一个轮播页，先看指示点、循环、自动播放、多卡展示和露边效果。

Swiper 很容易被写成“横向塞几张卡片”。这样当然能滑，但用户不知道当前在哪，也不知道旁边还有没有内容。我们这次只做展示配置，不写控制器按钮，也不记录当前页。

第一块是基础轮播。indicator(true) 让页面有位置感，loop(true) 让末尾能接回开头，itemSpace 负责每一页之间的距离。

第二块是自动播放。autoPlay(true) 配合 interval(3000) 就能让内容自己切换。这里要克制一点，自动播放适合轻量 Banner，不适合承载需要认真阅读的内容。

第三块是多卡展示。displayCount(2) 可以一次露出两张卡，适合推荐、专题入口、活动卡片。

最后是露边效果。prevMargin 和 nextMargin 会露出相邻卡片的一角，用户一眼就知道还能继续滑。

如果你要做首页 Banner，会默认开自动播放吗？还是更愿意让用户自己滑？

完整代码

class SwiperSlide {
  title: string
  desc: string
  color: string

  constructor(title: string, desc: string, color: string) {
    this.title = title
    this.desc = desc
    this.color = color
  }
}

@Entry
@Component
struct ArkUISwiperDemo {
  private slides: SwiperSlide[] = [
    new SwiperSlide('第一张', 'indicator 告诉用户现在在哪一页。', '#2563EB'),
    new SwiperSlide('第二张', 'loop 打开后，滑到末尾还能继续接回开头。', '#0F766E'),
    new SwiperSlide('第三张', 'autoPlay 适合轮播 Banner，但别让内容太快闪走。', '#C2410C'),
    new SwiperSlide('第四张', 'displayCount 能一次露出多张卡片。', '#7C3AED'),
    new SwiperSlide('第五张', 'prevMargin 和 nextMargin 可以做出露边效果。', '#B45309')
  ]

  @Builder
  sectionTitle(title: string, desc: string) {
    Column({ space: 6 }) {
      Text(title)
        .fontSize(19)
        .fontWeight(FontWeight.Bold)
        .fontColor('#111827')
      Text(desc)
        .fontSize(13)
        .fontColor('#6B7280')
        .lineHeight(20)
    }
    .width('100%')
    .alignItems(HorizontalAlign.Start)
  }

  @Builder
  slideCard(item: SwiperSlide) {
    Column({ space: 10 }) {
      Text(item.title)
        .fontSize(23)
        .fontWeight(FontWeight.Bold)
        .fontColor('#FFFFFF')
      Text(item.desc)
        .fontSize(14)
        .fontColor('#E5E7EB')
        .lineHeight(22)
    }
    .width('100%')
    .height('100%')
    .padding(18)
    .borderRadius(14)
    .backgroundColor(item.color)
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Start)
  }

  @Builder
  smallSlide(item: SwiperSlide) {
    Column({ space: 8 }) {
      Text(item.title)
        .fontSize(18)
        .fontWeight(FontWeight.Bold)
        .fontColor(item.color)
      Text(item.desc)
        .fontSize(12)
        .fontColor('#4B5563')
        .lineHeight(18)
    }
    .width('100%')
    .height('100%')
    .padding(12)
    .borderRadius(12)
    .backgroundColor('#F8FAFC')
    .border({ width: 1, color: '#E5E7EB' })
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Start)
  }

  build() {
    Scroll() {
      Column({ space: 22 }) {
        Column({ space: 8 }) {
          Text('ArkUI Swiper')
            .fontSize(28)
            .fontWeight(FontWeight.Bold)
            .fontColor('#111827')
          Text('轮播不是把卡片横着塞进去')
            .fontSize(16)
            .fontColor('#4B5563')
          Text('Swiper 负责分页滑动。我们先看指示点、循环、自动播放、多卡展示和露边效果，不加控制器按钮。')
            .fontSize(14)
            .fontColor('#6B7280')
            .lineHeight(22)
        }
        .width('100%')
        .alignItems(HorizontalAlign.Start)

        this.sectionTitle('基础轮播：先让分页感成立', 'indicator、loop、itemSpace 是最常用的几个配置。')
        Swiper() {
          ForEach(this.slides.slice(0, 3), (item: SwiperSlide) => {
            this.slideCard(item)
          }, (item: SwiperSlide) => item.title)
        }
        .width('100%')
        .height(190)
        .indicator(true)
        .loop(true)
        .itemSpace(10)

        this.sectionTitle('自动播放：适合轻量 Banner', 'autoPlay 打开后，用 interval 控制切换间隔。')
        Swiper() {
          ForEach(this.slides.slice(0, 3), (item: SwiperSlide) => {
            this.slideCard(item)
          }, (item: SwiperSlide) => item.title)
        }
        .width('100%')
        .height(190)
        .indicator(true)
        .loop(true)
        .autoPlay(true)
        .interval(3000)
        .itemSpace(10)

        this.sectionTitle('多卡展示：一次露出更多内容', 'displayCount 让一个页面里能看到多张卡，适合推荐流和运营位。')
        Swiper() {
          ForEach(this.slides, (item: SwiperSlide) => {
            this.smallSlide(item)
          }, (item: SwiperSlide) => item.title)
        }
        .width('100%')
        .height(142)
        .indicator(true)
        .loop(false)
        .displayCount(2)
        .itemSpace(12)

        this.sectionTitle('露边效果：提醒用户还能继续滑', 'prevMargin 和 nextMargin 会在两侧留出一部分相邻卡片。')
        Swiper() {
          ForEach(this.slides, (item: SwiperSlide) => {
            this.smallSlide(item)
          }, (item: SwiperSlide) => item.title)
        }
        .width('100%')
        .height(150)
        .indicator(true)
        .loop(true)
        .prevMargin(24)
        .nextMargin(24)
        .itemSpace(12)
      }
      .width('100%')
      .padding({ left: 18, right: 18, top: 22, bottom: 32 })
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#FFFFFF')
  }
}