HarmonyOS 鸿蒙Next 应用开发时 如何添加页面的骨架图以提升响应速度

鸿蒙应用页面中可以使用骨架屏来实现加载时的渲染展示。在数据源保持不变的场景中，可以直接采用基本数据类型进行渲染，例如使用骨架屏列表进行展示。

参考：

class MyDataSource implements IDataSource {
  private list: number[] = []

  constructor(list: number[]) {
    this.list = list
  }

  totalCount(): number {
    return this.list.length
  }

  getData(index: number): number {
    return this.list[index]
  }

  registerDataChangeListener(listener: DataChangeListener): void {
  }

  unregisterDataChangeListener() {
  }
}
@Entry
@Component
export struct ListExample {
  private arr: MyDataSource = new MyDataSource([])
  private listScroller: ListScroller = new ListScroller()

  aboutToAppear(): void {
    let list: number[] = []
    for (let i = 1; i <= 3000; i++) {
      list.push(i);
    }
    this.arr = new MyDataSource(list)
  }

  build() {
    NavDestination() {
      Column() {
        List({ space: 20, initialIndex: 100, scroller: this.listScroller }) {
          LazyForEach(this.arr, (item: number) => {
            ListItem() {
              Text('' + item)
                .width('100%')
                .height(100)
                .fontSize(16)
                .textAlign(TextAlign.Center)
                .borderRadius(10)
                .backgroundColor(0xFFFFFF)
            }
          }, (item: string) => item)
        }
        .onAppear(() => {
          // this.listScroller.scrollToIndex(100, false, ScrollAlign.CENTER)
        })
        .listDirection(Axis.Vertical) // 排列方向
        .scrollBar(BarState.Off)
        .friction(0.6)
        .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线
        .edgeEffect(EdgeEffect.Spring) // 边缘效果设置为Spring
        .width('90%')
        .cachedCount(3)
      }
      .width('100%')
      .height('100%')
      .backgroundColor(0xDCDCDC)
      .padding({ top: 5 })
    }.hideTitleBar(true)
  }
}