鸿蒙 Swiper 组件解析：轮播交互与动画效果全指南 原创

Swiper()
  .width(DeviceType.isPhone() ? '100%' : '80%') // 手机全屏，平板80%宽度
  .height(200)

Swiper()
  .indicator(Indicator.DotIndicator)
  .indicatorConfig({
    itemWidth: 8,          // 圆点宽度
    itemHeight: 8,         // 圆点高度
    color: '#999999',      // 未选中颜色
    selectedColor: '#007DFF', // 选中颜色
    bottom: 16,            // 距底部16vp
    align: IndicatorAlign.Center // 水平居中
  })

import { SwiperController } from '@ohos.ui';
 
@Entry
@Component
struct SwiperDemo {
  private controller: SwiperController = new SwiperController();
 
  build() {
    Column() {
      Swiper(this.controller) {
        // 轮播内容...
      }
      .width('100%')
      .height(200)
 
      Row() {
        Button('上一页')
          .onClick(() => this.controller.showPrevious())
        Button('下一页')
          .onClick(() => this.controller.showNext())
        Button('跳转到第3页')
          .onClick(() => this.controller.showIndex(2)) // 索引从0开始
      }
    }
  }
}

@State images: string[] = ['img1', 'img2', 'img3'];
 
// 刷新轮播内容
updateImages() {
  this.images = ['new1', 'new2', 'new3', 'new4'];
  this.controller.refresh() // 通知Swiper更新
}

@Entry
@Component
struct EcommerceBanner {
  // 1. 使用Resource类型明确资源引用
  @State banners: Resource[] = [
    $r('app.media.banner1'),
    $r('app.media.banner2'),
    $r('app.media.banner3')
  ]
 
  // 2. 提取常量提升可维护性
  private readonly BANNER_HEIGHT: number = 200
  private readonly SWIPER_INTERVAL: number = 4000
 
  build() {
    Swiper() {
      // 3. 使用组件化构建函数优化ForEach
      this.BannerItems()
    }
    .loop(true)
    .autoPlay(true)
    .interval(this.SWIPER_INTERVAL)
    .indicator(Indicator.DotIndicator)
    .indicatorConfig({
      selectedColor: '#FFFFFF',
      color: '#FFFFFF80'
    })
    .width('100%')
    .height(this.BANNER_HEIGHT)
  }
 
  // 4. 使用@Builder分离渲染逻辑
  @Builder
  BannerItems() {
    ForEach(
      this.banners,
      (banner: Resource, index: number) => {
        Image(banner)
          .width('100%')
          .height('100%')
          .objectFit(ImageFit.Cover)
          // 5. 添加唯一键值提升渲染性能
          .id(index.toString())
      },
      // 6. 指定键值生成器
      (item, index) => index.toString()
    )
  }
}

@Entry
@Component
struct FormWizard {
  // 1. 类型强化与常量提取
  @State pages: string[] = ['个人信息', '联系方式', '偏好设置', '完成']
  @State currentIndex: number = 0 // 响应式当前页索引
  private controller: SwiperController = new SwiperController()
 
  // 样式常量
  private readonly SWIPER_HEIGHT: string = '70%'
  private readonly BUTTON_MARGIN: number = 20
  private readonly FONT_SIZE: number = 24
 
  build() {
    Column() {
      // 2. 分离Swiper构建逻辑
      this.BuildSwiper()
 
      // 3. 按钮组构建
      Row() {
        Button('上一步')
          .stateEffect(true)
          .enabled(this.currentIndex > 0)
          .onClick(() => {
            this.controller.showPrevious()
            this.currentIndex = Math.max(0, this.currentIndex - 1)
          })
 
        Button('下一步')
          .stateEffect(true)
          .enabled(this.currentIndex < this.pages.length - 1)
          .onClick(() => {
            this.controller.showNext()
            this.currentIndex = Math.min(this.pages.length - 1, this.currentIndex + 1)
          })
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceEvenly)
      .margin({ top: this.BUTTON_MARGIN })
    }
    .height('100%')
    .padding(12)
  }
 
  // 4. 使用@Builder分离Swiper构建
  @Builder
  BuildSwiper() {
    Swiper(this.controller) {
      ForEach(
        this.pages,
        (page: string, index: number) => {
          this.BuildPageContent(page, index)
        },
        (item, index) => index.toString() // 键值生成器
      )
    }
    .vertical(true)
    .loop(false)
    .indicator(Indicator.DigitIndicator)
    .onChange((index: number) => {
      // 5. 同步更新响应式状态
      this.currentIndex = index
    })
    .width('100%')
    .height(this.SWIPER_HEIGHT)
  }
 
  // 6. 页面内容构建器
  @Builder
  BuildPageContent(page: string, index: number) {
    Column() {
      Text(page)
        .fontSize(this.FONT_SIZE)
        .fontWeight(FontWeight.Bold)
 
      // 7. 根据页面类型动态渲染内容
      if (index === 0) {
        this.PersonalInfoForm()
      } else if (index === 1) {
        this.ContactForm()
      } // ...其他页面实现
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
    .id(`page_${index}`) // 唯一标识符
  }
 
  // 8. 表单内容组件化
  @Builder
  PersonalInfoForm() {
    Column() {
      TextInput({ placeholder: '请输入姓名' })
        .margin(10)
      TextInput({ placeholder: '请输入身份证号' })
        .margin(10)
    }
    .margin({ top: 20 })
  }
 
  @Builder
  ContactForm() {
    Column() {
      TextInput({ placeholder: '手机号码' })
        .margin(10)
      TextInput({ placeholder: '电子邮箱' })
        .margin(10)
    }
    .margin({ top: 20 })
  }
}

Swiper() {
  LazyForEach(largeImages, (img) => Image(img), img => img.id)
}

.cacheCount(2) // 预加载当前页前后各2页

.onChange((index: number) => {
  console.log(`切换到第${index+1}页`)
})

// 根据设备类型动态调整
#if (DeviceType.isPhone())
  Swiper().width('100%').height(200)
#elif (DeviceType.isTablet())
  Swiper().width('80%').height(300)
#endif