HarmonyOS 主页面通过底部tab嵌套,子页面想实现可见刷新怎么操作?

主页面通过底部tab嵌套,子页面需要进行每天切换回来刷新数据,通过什么方法实现

阅读 431
1 个回答

可参考如下简版示例

import { One } from './view/One'
import { Two } from './view/Two'
import { Three } from './view/Three'


class TabClass {
  title: string = ''
  index: number = 0
  img?: ResourceStr
  selectedImg?: ResourceStr
}

const tabsData: TabClass[] = [
  {
    title: 'One',
    index: 0,
  },
  {
    title: 'Two',
    index: 1,
  },
  {
    title: 'Three',
    index: 2,
  }
]

@Entry
@Component
struct TabPage2 {
  private tabsController: TabsController = new TabsController();
  @State currentIndex: number = 0;

  @Builder
  customBuilderTab(item: TabClass) {

    Column() {
      Text(item.title)
        .fontSize(this.currentIndex === item.index ? 15 : 12)
        .fontColor(this.currentIndex === item.index ? '#1698CE' : '#6B6B6B')
        .margin({ top: 5 })
    }
    .width('100%')
    .height(50)
    .alignItems(HorizontalAlign.Center)
    .border({
      width: { top: 0.5 },
      color: Color.Grey
    })
    .onClick(() => {
      this.currentIndex = item.index
      this.tabsController.changeIndex(this.currentIndex)
    })

  }

  build() {

    Column() {
      Tabs({ barPosition: BarPosition.End ,controller:this.tabsController}) {
        TabContent() {
          One()
        }.tabBar(this.customBuilderTab(tabsData[0]))
        .onWillShow(() => {
          console.info("Pink will show")
        })
        .onWillHide(() => {
          console.info("Pink will hide")
        })

        TabContent() {
          Two()
        }.tabBar(this.customBuilderTab(tabsData[1]))

        TabContent() {
          Three()
        }.tabBar(this.customBuilderTab(tabsData[2]))
      }
      .animationDuration(0)
      .scrollable(false)
      .width('100%')
      .barHeight(50)
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.White)
  }
}

参考如下文档:

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-tabcontent-V5\#onwillshow12

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进