轮播图 HarmonyOS 鸿蒙 ArkTS ArkUI

特创码农
发布于 2024-2-13 20:25
7558浏览
0收藏

轮播图 HarmonyOS 鸿蒙 ArkTS ArkUI -鸿蒙开发者社区

第一步:新建图片数组

 @State swiperimgs:Array<Object>=[
  $r('app.media.a'), //本地图片或者网络图片
  $r('app.media.b'),
  $r('app.media.c'),
  $r('app.media.d')
  ]

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

第二步:写入轮播图代码

Column(){
        Swiper(){
          ForEach(this.swiperimgs, (item) => {
            Image(item)
              .width('90%')
              .height(180)
              .borderRadius(25)
          })
        }
        .borderRadius(25)
        .autoPlay(true)
        .indicator(false)
        .itemSpace(10)
        .onChange((index: number) => {
          console.info('当前的是:',index.toString())
        })
      }
      .width('100%')
      .borderRadius(25)
      .margin({top:30})

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.

已于2024-2-21 21:56:31修改
收藏
回复
举报
回复
    相关推荐