HarmonyOS Swiper支持动态修改数据吗

https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md

文章提供的demo ,想动态添加数据,但是swiper 值显示10条数据,能动态修改数据吗?

HarmonyOS
2024-08-29 11:08:54
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Heiang

Swiper支持动态修改数据的,需要UI响应数据变化,需要用@State注解,如果需要增加数据,对数据修改后,Swiper会自动增加/删除,请参考以下代码,

@Entry 
@Preview 
@Component 
struct Index { 
  @State arrays: Array<number> = [1, 2,3]; 
  private swiperController: SwiperController = new SwiperController() 
 
  build() { 
    Column({space:20}) { 
      Swiper(this.swiperController) { 
        ForEach(this.arrays, (item: string) => { 
          Text(item.toString()) 
            .height(160) 
            .width('100%') 
            .backgroundColor(0xAFEEEE) 
            .textAlign(TextAlign.Center) 
            .fontSize(30) 
        }, (item: string) => item) 
      } 
      .loop(true) 
      .autoPlay(true) 
      .interval(1000) 
 
      Button('增加一个').onClick(() => { 
        this.arrays.push(this.arrays.length) 
        console.log('数组长度为:'+this.arrays.length) 
      }) 
 
      Button('减少一个').onClick(() => { 
        if (this.arrays.length === 0) { 
          throw Error('List empty'); 
        } 
        this.arrays.pop() 
      }) 
    } 
  } 
}
分享
微博
QQ
微信
回复
2024-08-29 21:33:27
相关问题
litewearable支持swiper
2499浏览 • 1回复 待解决
Swiper的indicator后续会支持自定义
1835浏览 • 1回复 待解决
Swiper是否支持组件复用
688浏览 • 1回复 待解决
鸿蒙应用支持导出excel数据
4334浏览 • 1回复 待解决
动态修改style="background-color发现错误
2953浏览 • 1回复 待解决
HarmonyOS List组件动态刷新数据问题
679浏览 • 1回复 待解决
JS swiper 怎么像list一样动态添加item?
6245浏览 • 1回复 待解决
HarmonyOSAPP如何动态修改版本号
523浏览 • 1回复 待解决
HarmonyOS项目能修改包名
414浏览 • 1回复 待解决
Swiper 组件嵌套图片刷新数据会闪烁
1104浏览 • 1回复 待解决
wgcloud支持使用postgresql做数据
3869浏览 • 1回复 待解决