HarmonyOS 有类似骨架屏的实现demo吗

HarmonyOS

zbw_apple

2024-12-24 17:20:47

浏览

回答 1

待解决

回答 1

按赞同

按时间

shlp

可以参考如下代码：

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() {
  }
}

@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)
  }
}