TabContent在滚动的过程中过渡阶段仍然显示当前界面数据如何取消的示例代码

使用TabContent实现页面滚动,想取消TabContent在滚动的过程中,过渡阶段仍然显示当前界面的数据。

HarmonyOS
2024-04-29 00:20:58
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
l634youngpig

现象的原因是因为Tabs里的TabContent实际为同一个对象,而这个对象的数据又由页签值Index控制,导致出现了页签切换完成后数据才变化的情况,建议在构建tabs时使用不同的对象作为TabContent

参考以下写法:

@Entry 
@Component 
export struct SplashPage { 
  @StorageProp('currentBreakpoint') currentBreakpoint: string = 'sm'; 
  private titles = ['1', '2', '3'] 
  @State currentIndex: number = 0 
  @State datas: Array<Array<string>> = [['A1', "B1", 'C1', 'D1'], ['A2', "B2", 'C2', 'D2'], ['A3', "B3", 'C3', 'D3']] 
  private controller: TabsController = new TabsController() 
 
  build() { 
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) { 
      Column() { 
        Tabs({ barPosition: BarPosition.Start, controller: this.controller }) { 
          ForEach(this.titles, (item: string, index: number) => { 
            TabContent() { 
              List() { 
                ForEach(this.datas[Number(item)-1], (item: string) => { 
                  ListItem() { 
                    Text(item).fontSize(20).height(45).width('100%') 
                  } 
                }) 
              }.width('100%').height('100%').border({ color: '#F5F5F5', width: 1 }) 
            } 
          }) 
        } 
        .vertical(false) 
        .animationDuration(300) 
        .onChange((index: number) => { 
          this.currentIndex = index 
 
        }) 
      }.width('100%').height('100%') 
      .layoutWeight(1) 
    } 
    .height('100%') 
    .width('100%') 
    .backgroundColor(Color.Green) 
  } 
}
分享
微博
QQ
微信
回复
2024-04-29 16:21:10
相关问题
Lite Wearable 开发过程中疑问
8867浏览 • 2回复 待解决
mysql存储过程中处理多条数据
484浏览 • 1回复 待解决
使用华为账号服务登录示例代码
160浏览 • 1回复 待解决
过长文字如何滚动显示
302浏览 • 1回复 待解决