【HarmonyOS NEXT】TabContent滚动时，过渡阶段仍然显示当前界面的数据，如何处理

 

【关键字】

Tabs / TabContent / 滚动

【问题描述】

TabContent滚动时，过渡阶段仍然显示当前界面的数据，问题代码如下。

SplashPage：

@Entry
@Component
struct SplashPage {
  @StorageProp('currentBreakpoint') currentBreakpoint: string = 'sm';
  private breakpointSystem = new BreakpointSystem();
  private timeOutId: number = 0;
  private titles = ['1', '2', '3', '4']
  @State @Watch('onTabSelect') currentIndex: number = 0
  @State datas: Array<string> = ['A1', "B1", 'C1', 'D1']
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
      JtTabs({
        titles: this.titles,
        currentIndex: $currentIndex,
        tabContents: () => {
          this.customTabsContext()
        }
      }).width('100%').layoutWeight(1)
    }
    .height(StyleConstants.FULL_HEIGHT)
    .width(StyleConstants.FULL_WIDTH)
    .backgroundColor($r('app.color.page_background'))
  }

  @Builder
  customTabsContext() {
    List() {
      ForEach(this.datas, (item: string) => {
       ListItem(){
         Text(item).fontSize(20).height(45).width('100%')
       }
      })
    }.width('100%').height('100%').border({ color: '#F5F5F5', width: 1 })
  }
  aboutToAppear() {
  }
  onTabSelect() {
    if (this.currentIndex === 0) {
      this.datas = ['A1', "B1", 'C1', 'D1']
    } else if (this.currentIndex === 1) {
      this.datas = ['A2', "B2", 'C2', 'D2']
    } else if (this.currentIndex === 2) {
      this.datas = ['A3', "B3", 'C3', 'D3']
    }
  }
  aboutToDisappear() {
    this.breakpointSystem.unregister();
    clearTimeout(this.timeOutId);
  }
}

JtTabs：

@Component
export struct  JtTabs {
  @Link currentIndex: number
  @Prop titles: Array<string> = []
  @BuilderParam tabContents: (index: number) => void = defaultIndexBuilder
  private controller: TabsController = new TabsController()
  build() {
    Column() {
      Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
        ForEach(this.titles, (item: string, index: number) => {
          TabContent() {
            if (this.tabContents !== defaultIndexBuilder) {
              this.tabContents(index)
            } else {
              Column()
                .width('100%')
                .height('100%')
                .backgroundColor(Color.Red)
            }
          }
        })
      }
      .vertical(false)
      .animationDuration(300)
      .onChange((index: number) => {
        this.currentIndex = index
      })
    }.width('100%').height('100%')
  }
}

【解决方案】

这个现象的原因是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)
  }
}