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

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

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

现象的原因是因为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
相关问题
HAP编译过程中,本地依赖tgz
685浏览 • 1回复 待解决
mysql存储过程中处理多条数据
1876浏览 • 1回复 待解决
Lite Wearable 开发过程中疑问
10610浏览 • 2回复 待解决
录制过程中HarmonyOS如何切换摄像头
304浏览 • 1回复 待解决