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) 
  } 
}