如何让每个Tab页签的数据只请求一次
==================

#### 问题现象

当前实现逻辑：进入页面时自动请求第一个页签的数据，每当该页签显示时都会触发数据请求。现在需要实现当该页签第二次及之后显示时，避免重新发起数据请求。请问应如何实现？

#### 效果预览

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/28/v3/0u4kIgSpQoSsZfJpDw91aw/zh-cn_image_0000002658837247.gif?HW-CC-KV=V1&HW-CC-Date=20260709T133942Z&HW-CC-Expire=86400&HW-CC-Sign=16BF0F9F75C7F06E2C32E13EACD22D3F865FC67805F74EA4F5D6EE4737B11083 "点击放大")

#### 背景知识

TabContent在切换过程中会触发[onSelected](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-tabs#onselected18)回调，返回当前显示的页签索引。点击、滑动页签操作、修改状态变量等操作均会触发该回调。

#### 解决方案

通过创建状态变量tabContentArr记录该页签是否已被显示过，来判断TabContent页签的数据是否需要再次请求。

@Entry
@ComponentV2
struct TabContentLoading {
  _// 记录页签是否显示过，true已显示，false未显示，默认显示第一个页签_
  @Local tabContentArr: boolean\[\] \= \[true, false, false, false\];
  tabContents: string\[\] \= \['首页', '推荐', '发现', '我的'\];

  build() {
    Row() {
      Column() {
        Tabs({ barPosition: BarPosition.Start }) {
          ForEach(this.tabContents, (item: string, index) \=\> {
            TabContent() {
              if (this.tabContentArr\[index\]) {
                TabChild({ textName: index })
              } else {
                LoadingProgress().width(50)
              }
            }.tabBar(item)
          }, (item: string) \=\> \`${item}\`)
        }
        .onSelected((index) \=\> {
          if (this.tabContentArr\[index\]) {
            return;
          }
         _ // 模拟请求_
          setTimeout(() \=\> {
            this.tabContentArr\[index\] \= true; _//_ _显示过设置为true_
          }, 500);
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

@ComponentV2
struct TabChild {
  @Require @Param textName: number;

  build() {
    Column() {
      Text(this.textName \+ '')
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
  }
}