HarmonyOS鸿蒙Next中使用tab组件，需要显示index为1的tab页面，但是在点击到其他页面再返回，默认显示index为0的页面

HarmonyOS鸿蒙Next中使用tab组件，需要显示index为1的tab页面，但是在点击到其他页面再返回，默认显示index为0的页面 1、点击翻译机跳转到其他页面再返回 2、默认页面内容显示的是index为0的页面。应该显示index为1的页面帮忙看下  

@Entry
@Component
struct demo {
  @State fontColor: string = '#182431'
  @State selectedFontColor: string = '#007DFF'
  @State currentIndex: number = 1
  private controller: TabsController = new TabsController()

  @Builder
  tabBuilder(index: number, name: string) {
    Column() {
      Text(name)
        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
        .fontSize(16)
        .fontWeight(this.currentIndex === index ? 500 : 400)
        .lineHeight(22)
        .margin({ top: 17, bottom: 7 })
      Divider().strokeWidth(2).color('#007DFF').opacity(this.currentIndex === index ? 1 : 0)
    }.width('100%')
  }

  build() {
    Tabs({ barPosition: BarPosition.End, index: this.currentIndex, controller: this.controller }) {
      TabContent() {
      }.tabBar(this.tabBuilder(0, '翻译机'))

      TabContent() {
        Text('111')
      }.tabBar(this.tabBuilder(1, '消息'))

      TabContent() {
        Text('222')
      }.tabBar(this.tabBuilder(2, '我'))
    }
    .barMode(BarMode.Fixed)
    .animationDuration(10)
    .barOverlap(true)
    .scrollable(false)
    .barHeight(60)
    .onChange((index: number) => {
      if (index === 0) {
        router.pushUrl({ url: 'pages/translate/Main' })
      } else {
        this.currentIndex = index;
      }
    })
  }
}

更多关于HarmonyOS鸿蒙Next中使用tab组件，需要显示index为1的tab页面，但是在点击到其他页面再返回，默认显示index为0的页面的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

请参考此Demo

import promptAction from '@ohos.promptAction'

import { router } from '@kit.ArkUI'

class TabBar {

  title: string

  index: number

  constructor(title: string, index: number) {
    this.title = title
    this.index = index
  }
}

@Entry
@Component
struct TabsTestPage {

  @State currentIndex: number = 1; // 当前tab值

  @State index: number = 1; // 判断tabs是否选中

  private tabsController: TabsController = new TabsController();

  private tabBars: TabBar[] = [
    new TabBar('翻译机', 0),
    new TabBar('首页', 1),
    new TabBar('推荐', 2),
  ]

  onPageShow(): void {
    this.currentIndex = 1
    this.index = 1
  }

  build() {
    Column() {
      Row() {
        Flex() {
          this.TabBuilder()
        }.width('90%')
      }.width('100%').height(100)
      .justifyContent(FlexAlign.SpaceBetween).alignItems(VerticalAlign.Center)
      Stack({ alignContent: Alignment.TopEnd }) {
        Tabs({
          barPosition: BarPosition.Start,
          index: this.currentIndex,
          controller: this.tabsController
        }) {
          TabContent() {}
          TabContent() {
            Text('首页的内容').fontSize(30)
          }
          TabContent() {
            Text('推荐的内容').fontSize(30)
          }
        }.barMode(BarMode.Scrollable)
        .barOverlap(false)
        .barHeight(0)
      }.width("100%")
    }.backgroundColor(Color.Red)
  }

  // 自定义tabs组件
  @Builder
  TabBuilder() {
    List() {
      ForEach(this.tabBars, (item: TabBar,index:number) => {
        ListItem() {
          Column() {
            Text(item.title)
              .fontColor(this.index === item.index ? '#000' : '#999')
              .fontSize(20)
              .align(Alignment.Center)
          }
          .justifyContent(FlexAlign.Center)
          .alignItems(HorizontalAlign.Start)
          .margin({ left: 10 })
          .onClick(() => {
            if (index===0) {
              //todo 其他逻辑
              promptAction.showToast({
                message:"翻译机跳转"
              })
              router.pushUrl({
                url:'pages/Page12'
              })
            } else {
              this.index = index
              this.currentIndex = index;
            }
            // this.index = index // tabbar 颜色
          })
        }.height(100)
      })
    }.height(100)
    .listDirection(Axis.Horizontal)
    .scrollBar(BarState.Off)
  }
}

更多关于HarmonyOS鸿蒙Next中使用tab组件，需要显示index为1的tab页面，但是在点击到其他页面再返回，默认显示index为0的页面的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中使用Tab组件时，默认情况下，Tab组件会在切换页面后返回到初始的index为0的页面。要实现点击其他页面后返回时仍然显示index为1的页面，可以通过以下方式实现：

  1. 使用TabContent的currentIndex属性来动态设置当前显示的Tab页面。在onPageShow生命周期中，手动将currentIndex设置为1。

  2. 在TabContent的onChange事件中，记录当前选中的Tab页面的index，并在返回时使用该index恢复显示。

示例代码如下：

@Entry
@Component
struct TabExample {
  @State currentIndex: number = 1;

  build() {
    Tab() {
      TabContent() {
        Text('Tab 0')
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
          .textAlign(TextAlign.Center)
      }

      TabContent() {
        Text('Tab 1')
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
          .textAlign(TextAlign.Center)
      }
    }
    .onChange((index: number) => {
      this.currentIndex = index;
    })
    .currentIndex(this.currentIndex)
    .onPageShow(() => {
      this.currentIndex = 1; // 设置默认显示的Tab页面为index 1
    })
  }
}

通过这种方式，可以在返回时保持显示index为1的Tab页面。

在HarmonyOS鸿蒙Next中使用Tab组件时，若希望返回时显示index为1的页面而非默认的index为0，可以通过在页面离开时保存当前Tab的index，并在页面返回时恢复该index。具体实现如下：

  1. 在onPageHide生命周期中保存当前index。
  2. 在onPageShow生命周期中恢复之前保存的index。

示例代码：

@State currentIndex: number = 1;

onPageHide() {
  // 保存当前index
  AppStorage.SetOrCreate('lastTabIndex', this.currentIndex);
}

onPageShow() {
  // 恢复保存的index
  this.currentIndex = AppStorage.Get('lastTabIndex') || 1;
}

这样，返回时页面会显示index为1的Tab页面。

回到顶部