骨架屏/LazyForEach实现骨架屏预加载效果

// 用户自定义数据源
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()
  @State translateX: string = '-100%'

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

  build() {
    Column() {
      List({ space: 20, initialIndex: 100, scroller: this.listScroller }) {
        LazyForEach(this.arr, (item: number) => {
          ListItem() {
            Stack() {
              // 设置组件的背景色
              Text()
                .width('100%')
                .height(100)
                .backgroundColor('rgba(0,0,0,0.1)')

              Text()
                .width('100%')
                .height(100)
                .translate({ x: this.translateX })
                .onAppear(() => {
                  this.translateX = '100%'
                }) // 设置动画的持续时间和循环次数
                .animation({
                  duration: 1500,
                  iterations: -1
                }) // 设置颜色渐变效果
                .linearGradient({
                  angle: 90,
                  colors: [
                    ['rgba(255,255,255,0)', 0],
                    ['rgba(255,255,255,1)', 0.5],
                    ['rgba(255,255,255,0)', 1]
                  ]
                })
            }
            .width('100%')
            .height(100)
            .borderRadius(10)
            .backgroundColor(0xFFFFFF)
          }
        })
      }
      .listDirection(Axis.Vertical)
      .scrollBar(BarState.Off)
      .friction(0.6)
      .edgeEffect(EdgeEffect.Spring)
      .width('90%')
      .cachedCount(3)
    }
    .width('100%')
    .height('100%')
    .backgroundColor(0xDCDCDC)
    .padding({ top: 5 })
  }
}