HarmonyOS鸿蒙Next学习例程1：滑动器(swiper)测试成功！

HarmonyOS鸿蒙Next学习例程1：滑动器(swiper)测试成功！ 滑动器(swiper)测试成功！

“华为开发者学堂”真是太棒了，文档清晰，代码配输出效果，傻瓜式教学，非常贴心。

便宜了我这个老白☺☺！

上个图！还没有上传视频的资格，凑合着用吧o(╥﹏╥)o。

代码如下：

@Entry
@Component
struct Index {
  @State message: string = '鸿蒙开发初探 Swiper';
  build() {
    Column() {
      Text(this.message)
        .id('HelloWorld')
        .fontSize(25)
        .fontWeight(FontWeight.Bold)
        .fontColor('#080888')
        .width('100%')
        .textAlign(TextAlign.Start)
        .padding({top:5,left:15})
      Banner()
    }
    .height('100%')
    .width('100%')
    .backgroundColor('#F1F3F5')
  }

}
class BannerClass {
  id: string = '';
  imageSrc: ResourceStr = '';
  url: string = '';
  constructor(id: string, imageSrc: ResourceStr, url: string) {
    this.id = id;
    this.imageSrc = imageSrc;
    this.url = url;
  }
}
@Preview
@Component
struct Banner
{
  @State bannerArray:Array<BannerClass>=[
    new BannerClass('pic1',$r('app.media.fj_lujiazui'),''),
    new BannerClass('pic2',$r('app.media.fj_kejiguan'),''),
    new BannerClass('pic3',$r('app.media.fj_jinianta'),''),
  ]
  build() {
    Swiper() {
      ForEach(this.bannerArray, (item: BannerClass, index: number) => {
        Image(item.imageSrc)
          .objectFit(ImageFit.Contain)
          .width('100%')
          .padding({ top: 11, left: 16, right: 16 })
          .borderRadius(16)
      }, (item: BannerClass, index: number) => item.id)
    }
    .autoPlay(true)
    .loop(true)
  }
}

使用了数组 Array，自定义了类 BannerClass，用到了 ForEach，学会了用资源文件。

真是学到了！


更多关于HarmonyOS鸿蒙Next学习例程1：滑动器(swiper)测试成功！的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

鸿蒙Next的Swiper组件用于实现页面滑动效果，支持水平或垂直方向滑动。通过SwiperController可控制页面切换，结合SwiperIndicator可显示页面指示器。开发者需在布局文件中配置Swiper及其子组件，并在代码中管理滑动逻辑。该组件适用于轮播图、引导页等场景。

更多关于HarmonyOS鸿蒙Next学习例程1：滑动器(swiper)测试成功！的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


恭喜你成功完成了第一个HarmonyOS Next的Swiper组件实践！从你的代码和效果图来看，实现得非常标准。

你的代码清晰地展示了几个核心的ArkTS开发要点：

  1. 组件化结构：将轮播图封装为独立的Banner组件，结构清晰，符合高内聚、低耦合的设计思想。
  2. 状态管理：使用@State装饰器管理bannerArray数据，当数据源变化时，UI会自动更新。
  3. 数据循环渲染：正确使用ForEach方法遍历数组，并提供了唯一的键值生成函数(item: BannerClass) => item.id，这对于列表渲染性能至关重要。
  4. Swiper配置：设置了.autoPlay(true)和.loop(true)，实现了自动轮播和循环播放的基础交互功能。
  5. 资源引用：规范地使用$r('app.media.xxx')语法引用应用资源，这是HarmonyOS应用开发的标准做法。

这个例子虽然基础，但完整走通了数据定义、状态管理、UI渲染和组件封装的完整链路，是一个非常好的起点。掌握这些模式后，你可以继续探索Swiper更丰富的属性，如自定义切换动画、分页器指示点、监听切换事件等，来构建更复杂的交互效果。

继续保持动手实践，这是学习开发最有效的方式。期待看到你更多的学习成果分享！

回到顶部