HarmonyOS 鸿蒙Next Tabs组件从第一个TabContent点击切换到第四个TabContent时会闪现第二个、第三个TabContent

发布于 1周前 作者 sinazl 来自 鸿蒙OS

HarmonyOS 鸿蒙Next Tabs组件从第一个TabContent点击切换到第四个TabContent时会闪现第二个、第三个TabContent

Tabs组件从TabContent1点击切换到第四个TabContent4时会闪现TabContent2、TabContent3。

而且在从第一个TabContent1直接通过Tabs.onChange事件切换到TabContent4时,会逐个闪现TabContent2、TabContent3,且会执行TabContent2、TabContent3的aboutToAppear()。期望从TabContent1切换到TabContent4时不闪现TabContent2、TabContent3

有这样效果的demo吗?

2 回复
[@Entry](/user/Entry)
[@Component](/user/Component)
struct TabsDemo {
  [@State](/user/State) currentIndex: number = 0
  pageInfos: NavPathStack = new NavPathStack()
  build() {
    Navigation(this.pageInfos) {
      Stack({ alignContent: Alignment.TopStart }){
        Flex({ direction: FlexDirection.Column }){
          Tabs({ index: this.currentIndex }) {
            TabContent() {
              Column().width('100%').height('100%').backgroundColor('#00CB87')
            }
            TabContent() {
              Column().width('100%').height('100%').backgroundColor('#007DFF')
            }
            TabContent() {
              Column().width('100%').height('100%').backgroundColor('#FFBF00')
            }
          }
          .barHeight(0)
          .scrollable(false)
          .onChange((index) => {
            this.currentIndex = index;
          })
          Flex({
            direction: FlexDirection.Row,
            alignItems: ItemAlign.Center,
            justifyContent: FlexAlign.SpaceAround
          }) {
            Column({space:5}){
              Text('0')
                .fontSize(14).fontColor('#4f4f4f')
            }.onClick(() => {
              this.currentIndex = 0
            })
            Column({space:5}){
              Text('1')
                .fontSize(14).fontColor('#4f4f4f')
            }.onClick(() => {
              this.currentIndex = 1
            })
            Column({space:5}){
              Text('2')
                .fontSize(14).fontColor('#4f4f4f')
            }.onClick(() => {
              this.currentIndex = 2
            })
          }.height(36)
        }
        .width('100%')
        .height('100%')
      }
    }.hideTitleBar(true)
    .mode(NavigationMode.Stack)
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
  }
}

针对HarmonyOS鸿蒙Next Tabs组件从第一个TabContent点击切换到第四个TabContent时闪现第二个、第三个TabContent的问题,这通常是由于Tabs组件的默认动画效果或内容重绘导致的。

要解决此问题,你可以尝试以下方法:

  1. 禁用默认动画:通过设置animationDuration参数为0来禁用Tabs切换时的默认动画效果,从而避免在切换过程中闪现其他TabContent。
  2. 优化性能:确保Tabs组件中的TabContent在切换时不会触发不必要的重绘。你可以检查并优化Tabs组件的状态管理,避免在循环中直接使用响应式变量,以减少性能开销。
  3. 自定义动画:如果需要保留动画效果,可以尝试自定义动画,确保动画过程平滑且不会闪现其他TabContent。你可以通过修改TabContent的CSS属性(如opacity、transform等)来实现自定义动画效果。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部