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

发布于 1周前 作者 songsunli 来自 鸿蒙OS

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

有类似骨架屏的实现demo吗

2 回复

可以参考如下代码:

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](/user/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)
  }
}

更多关于HarmonyOS 鸿蒙Next 有类似骨架屏的实现demo吗的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


HarmonyOS 鸿蒙Next 骨架屏实现

HarmonyOS 鸿蒙Next平台确实支持骨架屏(Skeleton Screen)的实现,用于在内容加载过程中为用户提供视觉反馈,提升用户体验。虽然HarmonyOS本身没有直接提供骨架屏的官方Demo,但开发者可以通过自定义组件和动画效果来实现类似功能。

在HarmonyOS中,你可以利用ArkUI(eTS或JS UI框架)来构建骨架屏。这通常涉及创建一个自定义的UI组件,该组件使用矩形或其他形状来模拟数据的占位符,并通过动画来展示加载过程。你可以通过设置这些占位符的透明度、颜色、大小等属性,以及使用动画效果来模拟数据的加载进度。

为了实现这一点,你需要熟悉ArkUI的组件和动画API,以及如何通过数据绑定和状态管理来更新UI。你可以根据实际需求,将骨架屏组件与数据加载逻辑相结合,以便在数据加载完成时无缝切换到实际内容。

请注意,实现骨架屏的具体代码会根据你的应用需求和设计而有所不同。你可以参考HarmonyOS的官方文档和开发者社区的资源来获取更多关于自定义组件和动画效果的详细信息。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部