HarmonyOS NEXT实战：Swiper轮播图

HarmonyOS Next实战##HarmonyOS应用开发##教育

目标：实现轮播图，每4秒自动循环切换，指示器为长条横线。

前提：需要申请权限ohos.permission.INTERNET。

实现思路：

1. 通过Swiper实现轮播图。
2. 通过autoPlay和interval实现自动轮播。
3. 通过indicator设置指示器样式。

Swiper组件提供滑动轮播显示的能力。Swiper本身是一个容器组件，当设置了多个子组件后，可以对这些子组件进行轮播显示。通常，在一些应用首页显示推荐的内容时，需要用到轮播显示的能力。

循环播放
通过loop属性控制是否循环播放，该属性默认值为true。
当loop为true时，在显示第一页或最后一页时，可以继续往前切换到前一页或者往后切换到后一页。如果loop为false，则在第一页或最后一页时，无法继续向前或者向后切换页面。

自动轮播
Swiper通过设置autoPlay属性，控制是否自动轮播子组件。该属性默认值为false。
autoPlay为true时，会自动切换播放子组件，子组件与子组件之间的播放间隔通过interval属性设置。interval属性默认值为3000，单位毫秒。

导航点样式
Swiper提供了默认的导航点样式和导航点箭头样式，导航点默认显示在Swiper下方居中位置，开发者也可以通过indicator属性自定义导航点的位置和样式，导航点箭头默认不显示。
通过indicator属性，开发者可以设置导航点相对于Swiper组件上下左右四个方位的位置，同时也可以设置每个导航点的尺寸、颜色、蒙层和被选中导航点的颜色。

可选导航点指示器样式。

• DotIndicator：圆点指示器样式。
• DigitIndicator：数字指示器样式。
• boolean：是否启用导航点指示器。设置为true启用，false不启用。
  默认值：true
  默认类型：DotIndicator

轮播方向
Swiper支持水平和垂直方向上进行轮播，主要通过vertical属性控制。
当vertical为true时，表示在垂直方向上进行轮播；为false时，表示在水平方向上进行轮播。vertical默认值为false。

实战

@Entry
@Component
struct SwiperDemoPage {
   
  imgs: ImageObj[] = [
    {
   
      src: 'https://c-ssl.dtstatic.com/uploads/blog/202311/27/0GSZv1oh0ePwpE.thumb.400_0.jpeg',
      title: '轮播图1',
    },
    {
   
      src: 'https://c-ssl.dtstatic.com/uploads/blog/202311/27/3BSm7JWFzV7Pqm.thumb.400_0.jpeg',
      title: '轮播图2',
    },
    {
   
      src: 'https://c-ssl.dtstatic.com/uploads/blog/202311/27/4ESaevWhoEyXqY.thumb.400_0.jpeg',
      title: '轮播图3',
    },
  ]
  private isLoop: boolean = false

  build() {
   
    Column({
    space: 10 }) {
   
      Text('Swiper轮播图实战')
      this.buildSwiper()
    }
    .height('100%')
    .width('100%')
  }

  /**
   * 轮播图UI
   */
  @Builder
  buildSwiper() {
   
    Column() {
   
      Swiper() {
   
        ForEach(this.imgs, (item: ImageObj) => {
   
          Stack({
    alignContent: Alignment.Bottom }) {
   
            Image(item.src)
              .width(Percent.P100)
              .height(Percent.P100)
            Row() {
   
              Text(item.title)
                .maxLines(2)
                .textOverflow({
    overflow: TextOverflow.Ellipsis })
                .wordBreak(WordBreak.BREAK_ALL)
                .margin({
    left: 8, right: 8, bottom: 26 })
                .fontColor(Color.White)
            }
            .width(Percent.P100)
          }
          .width(Percent.P100)
          .height(Percent.P100)
        })
      }
      .width(Percent.P100)
      .height(Percent.P100)
      .loop(this.isLoop)
      .effectMode(EdgeEffect.None) //设置边缘滑动效果
      .autoPlay(true)
      .interval(4000)
      .indicator(
        // 设置导航点样式
        new DotIndicator()
          .itemWidth(12)
          .itemHeight(2)
          .selectedItemWidth(24)
          .selectedItemHeight(2)
          .color(Color.Gray)
          .selectedColor(Color.White)
      )
    }
    .width(Percent.P100)
    .backgroundColor(Color.White)
    .aspectRatio(9 / 16)
    .borderRadius(6)
    .clip(true)
    .margin(10)
  }
}

interface ImageObj {
   
  src: string
  title: string
}

enum Percent {
   
  P100 = '100%'
}