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

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

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

2 回复

简版demo:

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;
  @State oneNum: number = 0;
  @State twoNum: number = 0;
  @State threeNum: 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(() => {
      if (item.index === 0) {
        this.oneNum += 1
      } else if (item.index === 1){
        this.twoNum += 1
      } else {
        this.threeNum += 1
      }
      this.currentIndex = item.index
      this.tabsController.changeIndex(this.currentIndex)
    })

  }

  build() {

    Column() {
      Tabs({ barPosition: BarPosition.End ,controller:this.tabsController}) {
        TabContent() {
          One({oneNum:$oneNum})
        }.tabBar(this.customBuilderTab(tabsData[0]))
        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)
  }
}

// ./view/One.ets

@Component
export struct One {

  @Link @Watch("oneNumState")  oneNum: number ;

  aboutToAppear(): void {
    console.log('aboutToAppear---')
  }

  oneNumState(prop: string){
    console.log('oneNumState---',prop)
  }

  build() {
    Column() {
      Text(`One - ${this.oneNum}`)
    }
    .width('100%')
    .height('100%')
  }
}

更多关于HarmonyOS 鸿蒙Next 主页面通过底部tab嵌套,子页面想实现可见刷新怎么操作的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙系统中,若想在Next版本的主页面通过底部tab嵌套,并在子页面中实现可见刷新,可以采用以下方式:

  1. 使用PageSlider组件: 在主页面中,利用PageSlider组件实现底部tab的切换功能。PageSlider可以包含多个Page组件,每个Page组件对应一个子页面。

  2. 子页面实现刷新功能: 在每个子页面中,可以通过监听页面的可见性变化来实现刷新功能。HarmonyOS提供了页面生命周期的回调接口,如onPageShowonPageHide,可以在这些回调中编写刷新逻辑。

  3. 数据刷新: 当子页面变为可见时(如在onPageShow回调中),触发数据刷新操作,如从服务器获取最新数据或重新计算页面内容。

  4. UI更新: 数据刷新完成后,更新UI组件以显示最新的数据。

请注意,确保在子页面的onPageHide回调中停止任何可能仍在运行的数据刷新操作,以避免资源浪费。

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

回到顶部