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) 
  } 
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.