HarmonyOS鸿蒙Next中请教下如何在首页切换到某个tab刷新下数据

如果想精准控制在切换到 CollectIndex 页面时刷新数据， 可以传一个 controller 给收藏页面，由它去实现刷新逻辑。 在页面切换时，调用 controller 的刷新方法。

大致代码如下：

@Entry
@Component
struct Index {
  collectController: CollectController = new CollectController()

  @Builder
  tabBuilderContent(index: number) {
    if (index === 0) { //  首页界面
      HomeIndex()
    } else if (index === 1) { // 发现界面
      FindIndex()
    } else if (index === 2) { // 我的收藏
      CollectIndex({ controller: this.collectController })
    } else if (index === 3) { // 个人信息界面
      MeIndex()
    }
  }

  build() {
    Tabs({ barPosition: BarPosition.End, index: this.currentIndex }) {

    }
    .onChange((index: number) => {
      this.currentIndex = index
      if (index === 2) {
        this.collectController.onRefresh?.()
      }
    })
  }
}

class CollectController {
  onRefresh?: () => void
}

@Component
export struct CollectIndex {
  // 外部传进来
  controller: CollectController = new CollectController()

  aboutToAppear(): void {
    this.controller.onRefresh = () => {
      //在这里请求你的接口
    }
  }

  build() {
    //你的UI
  }
}

楼主你好，这个问题可以通过Emitter事件通知来实现，具体实现如下：

• Emitter主要提供线程间发送和处理事件的能力，包括对持续订阅事件或单次订阅事件的处理、取消订阅事件、发送事件到事件队列等。工作原理是使用emitter.emit发送指定事件，再通过emitter.on持续订阅指定的事件，并在接收到该事件时，执行对应的回调处理函数。

在主页面通过emitter.emit(‘refreshTable’)发送指定的事件refreshTable，参考代码如下：

import { SubTabContent } from './SubTabContent'
import { emitter } from '@kit.BasicServicesKit'

@Entry
@Component
struct TabContentExample {
  @State fontColor: string = '#182431'
  @State selectedFontColor: string = '#007DFF'
  @State currentIndex: number = 0
  @State selectedIndex: number = 0
  @State refreshFlag: boolean = true
  private controller: TabsController = new TabsController()

  @Builder
  tabBuilder(index: number) {
    Column() {
      Text(`Tab${index + 1}`)
        .fontColor(this.selectedIndex === index ? this.selectedFontColor : this.fontColor)
        .fontSize(20)
        .fontWeight(500)
        .lineHeight(14)
    }.width('100%')
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
        TabContent() {
          Column() {
            SubTabContent()
          }
          .width('100%')
        }.tabBar(this.tabBuilder(0))

        TabContent() {
          Column() {
            Text('Tab2')
              .fontSize(36)
              .fontColor('#182431')
              .fontWeight(500)
              .opacity(0.4)
              .margin({ top: 30, bottom: 56.5 })
            Divider()
              .strokeWidth(0.5)
              .color('#182431')
              .opacity(0.05)
          }.width('100%')
        }.tabBar(this.tabBuilder(1))
      }
      .vertical(false)
      .barHeight(56)
      .onChange((index: number) => {
        this.currentIndex = index
        this.selectedIndex = index
        if (index === 0) {
          // 事件携带的数据
          let eventData: emitter.EventData = {
            data: {}
          };
          // 通过emitter.emit('refreshTable')发送指定的事件
          emitter.emit("refreshTable", eventData);
        }
      })
      .onAnimationStart((index: number, targetIndex: number, event: TabsAnimationEvent) => {
        if (index === targetIndex) {
          return
        }
        // selectedIndex控制自定义TabBar内Image和Text颜色切换
        this.selectedIndex = targetIndex
      })
      .width('100%')
      .height('100%')
      .backgroundColor('#F1F3F5')
      .margin({ top: 38 })
    }
    .width('100%')
    .height('100%')
    .padding({
      bottom: 30
    })
  }
}

在子页面通过emitter.on(‘refreshTable’)持续订阅该事件去刷新数据，参考代码如下：

import { emitter } from '@kit.BasicServicesKit';

@Component
export struct SubTabContent {
  @State counter: number = 0

  aboutToAppear(): void {
    // Tabs子组件通过emitter.on('refreshTable')持续订阅该事件去刷新数据
    emitter.on("refreshTable", () => {
      this.counter += 1
    });
  }

  build() {
    Text(`切换Tabs刷新数据${this.counter}`)
  }
}

问：如果子页面的数据是从服务器拉取的要怎么做？

答：在子页面的事件监听回调里调用数据拉取接口，处理从服务器请求的数据，再去刷新子页面。