HarmonyOS鸿蒙Next中列表数据不存在时怎么占位

HarmonyOS鸿蒙Next中列表数据不存在时怎么占位 要用List展示数据，我已知我的数据长度，但是数据内容可能还没收到，打个比方，我先请求到我有100个数据，一屏展示10个，然后我要在用户滑动到第70的时候才请求70-80的数据，那数据没下来时我希望展示默认的

代码如下：

@State data: number[] = []
aboutToAppear(): void {
  for (let i = 1; i < 20; i = i + 2) {
    this.data[i] = 1 //模拟取到部分数据
  }
}

展示的代码

List() {
  ForEach(this.data, (item: number, index: number) => {
    ListItem() {
      Text(`我是第${index}个`).backgroundColor('#999999').height(80)
    }
  })
}

希望能展示出20个item，this.data=20，但是实际只有10个item


更多关于HarmonyOS鸿蒙Next中列表数据不存在时怎么占位的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

目前没有提供您想要的这种指定长度方法。

占位使用骨架屏，只需要展示固定的骨架个数，不需要按照实际数据展示骨架。比如1000条数据，

数据还没回来的时候，展示10个骨架数据，骨架屏的数据只需要简单mock即可

更多关于HarmonyOS鸿蒙Next中列表数据不存在时怎么占位的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，当列表数据不存在时，可以通过以下几种方式进行占位：

  1. 使用空状态视图：可以在布局文件中定义一个空状态视图，当列表数据为空时，显示该视图。空状态视图通常包含一些提示信息，如“暂无数据”或“数据加载中”。

  2. 使用占位符组件：鸿蒙提供了占位符组件（Placeholder），可以在数据加载前或数据为空时显示占位符。占位符可以是一个简单的矩形框，也可以是自定义的布局。

  3. 自定义布局：如果默认的空状态视图或占位符不能满足需求，可以自定义一个布局文件，并在数据为空时动态加载该布局。

  4. 使用条件渲染：在布局文件中使用条件渲染，根据数据是否为空来决定显示列表还是占位视图。

  5. 使用数据绑定：通过数据绑定机制，将空状态视图与数据源绑定，当数据源为空时，自动显示空状态视图。

这些方法可以根据具体需求选择使用，确保在列表数据不存在时，用户界面仍然保持友好和一致。

在HarmonyOS Next中，当列表数据不存在时，可以通过使用EmptyComponent组件进行占位，提示用户当前无数据。例如：

if (dataList.length === 0) {
  return <EmptyComponent message="暂无数据" />;
}

EmptyComponent可以自定义显示图标、文字等，确保界面友好且直观。

回到顶部