• Lv0
    粉丝0

积分10 / 贡献0

提问1答案被采纳0文章0

作者动态

    页面中数据动态刷新问题

    pony 显示全部楼层 发表于 2023-11-18 15:11:04

    【问题描述】

    1. 水果排序的一个简单页面,点击刷新按钮进行数据刷新,数据是静态数据
    @Component
    export struct ListItemComponent {
    
      index: string;
      name: string;
      vote: string;
    
      build() {
        Row() {
          if (parseInt(this.index) <= 3) {
            Column() {
              Row() {
                Text(this.index).fontSize(16).fontWeight(FontWeight.Bold).fontColor(Color.White)
              }
              .width(24)
              .height(24)
              .backgroundColor(Color.Blue)
              .borderRadius(18)
              .justifyContent(FlexAlign.Center)
            }.width('30%').alignItems(HorizontalAlign.Start)
    
          } else {
            Column() {
              Text(this.index).fontSize(16).width(24).fontWeight(FontWeight.Bold)
                .textAlign(TextAlign.Center)
            }.width('30%').alignItems(HorizontalAlign.Start)
          }
          Text(this.name).fontSize(16).fontWeight(FontWeight.Bold).width('50%')
          Text(this.vote).fontSize(16).fontWeight(FontWeight.Bold).width('20%')
        }
      }
    }
    import { Fruit, rankData1, rankData2 } from "../module/DataModele"
    import { TitleComponent } from '../view/TitleComponent'
    import { ListHeaderComponent } from '../view/ListHeaderComponent'
    import { ListItemComponent } from '../view/ListItemComponent'
    
    @Entry
    @Component
    struct Index {
      data1: Array<Fruit> = rankData1
      data2: Array<Fruit> = rankData2
      @State isSwitchData: boolean = true
    
      build() {
        Column() {
          //标题头
          TitleComponent({ isSwitchData: $isSwitchData })
          //排行榜头
          ListHeaderComponent()
          //排行榜列表项
          this.RankList()
    
        }.width('100%').height('100%').backgroundColor('#f1f3f5')
      }
    
    
      @Builder RankList() {
        Column() {
          Row(){
            // 这里的标记是会随着点击变化的
            Text(this.isSwitchData + '')
          }
          List() {
            ForEach(this.isSwitchData ? this.data1 : this.data2, (item: Fruit) => {
    
              ListItem() {
                ListItemComponent({
                  index: item.id,
                  name: item.name,
                  vote: item.vote
                })
              }.width('100%').height(47)
            })
          }
        }.width('90%').padding(15).backgroundColor(Color.White).borderRadius(18)
      }
    }
    1. image.png
    2. 尝试过将静态数组一起传入子组件,并为生效
    3. 期待通过点击刷新按钮,页面数据渲染更换静态数据源

    【运行环境】

    硬件: ROM版本:MAC 12.6.8 DevEvoStudio版本: 4.0 Release SDK版本:3.1.0

    您尚未登录,无法参与评论,登录后可以:
    参与开源共建问题交流
    认同或收藏高质量问答
    获取积分成为开源共建先驱

    精彩评论1

    马迪

    沙发 发表于 2023-11-18 20:09:35

    这个好像就是课程里的demo吧,有啥问题吗? 是不是在刷新图标的按钮初,处理一个click事件,把isSwitchData取反,就可以更换数据源了?

    Copyright   ©2023  OpenHarmony开发者论坛  京ICP备2020036654号-3 |技术支持 Discuz!

    返回顶部