当前位置：首页 > news >正文

HarmonyOS Web 加载骨架屏 + Web 淡入动画模板（可直接用）

news 2026/6/14 6:27:34

HarmonyOS Web 加载骨架屏 + Web 淡入动画模板（可直接用）

一起来构建生态吧~

在真实项目里，Web 页面加载体验好不好，不取决于页面最终长什么样，而取决于：
用户点进去后的前 1～3 秒你给了什么反馈。

如果这段时间是白屏、卡住、没反应，哪怕页面最后加载得再漂亮，体验分也已经掉了。

这篇文章我给你一套可以直接复制进工程使用的方案，实现这几个目标：

页面一进来 立刻显示原生骨架屏
Web 在后台加载，不抢视觉
Web 可展示时淡入
骨架屏淡出
全程无白屏、无闪烁、无突兀跳变

一、整体思路（先讲清楚，不然容易写歪）

一句话概括这套方案：

Web 始终存在，但一开始是透明的；
骨架屏覆盖在上面；
Web 准备好后淡入，骨架屏淡出。

关键点有 3 个：

Web 不要等加载完才创建（否则必闪）
骨架屏是原生组件，不是 Web 里的 loading
动画只控制 opacity，不做 layout 变更

二、页面级完整模板（直接可用）

这是一个完整的 ArkTS 页面，你可以直接新建
WebSkeletonFadePage.ets 使用。

import { webview } from '@kit.ArkWeb';@Entry
@Component
struct WebSkeletonFadePage {private controller: webview.WebviewController = new webview.WebviewController();@State isSkeletonVisible: boolean = true;@State skeletonOpacity: number = 1;@State webOpacity: number = 0;@State progress: number = 0;@State showError: boolean = false;private fadeInWebAndHideSkeleton() {// 避免重复触发if (!this.isSkeletonVisible && this.webOpacity >= 1) return;// Web 淡入animateTo({ duration: 240, curve: Curve.EaseOut }, () => {this.webOpacity = 1;});// 骨架屏淡出animateTo({ duration: 220, curve: Curve.EaseIn }, () => {this.skeletonOpacity = 0;});// 动画结束后移除骨架屏setTimeout(() => {this.isSkeletonVisible = false;}, 240);}build() {Stack() {// Web 组件（始终存在，只是透明度变化）Web({src: 'https://example.com', // 换成你的地址或 rawfilecontroller: this.controller}).javaScriptAccess(true).onPageBegin(() => {this.showError = false;this.progress = 0;this.isSkeletonVisible = true;this.skeletonOpacity = 1;this.webOpacity = 0;}).onProgressChange((p: number) => {this.progress = p;// 经验值：80% 基本可见首屏if (p >= 80) {this.fadeInWebAndHideSkeleton();}}).onPageEnd(() => {// 兜底，确保一定淡入this.fadeInWebAndHideSkeleton();}).onRenderExited(() => {this.showError = true;this.isSkeletonVisible = false;this.webOpacity = 1;}).opacity(this.webOpacity).width('100%').height('100%')// 骨架屏if (this.isSkeletonVisible) {SkeletonLayer({progress: this.progress,opacity: this.skeletonOpacity})}// 错误态（可选）if (this.showError) {Column({ space: 12 }) {Text('加载失败').fontSize(18).fontWeight(FontWeight.Bold)Text('请检查网络后重试').opacity(0.7)Button('重试').onClick(() => {this.showError = false;this.isSkeletonVisible = true;this.skeletonOpacity = 1;this.webOpacity = 0;this.controller.refresh();})}.width('100%').height('100%').justifyContent(FlexAlign.Center)}}.width('100%').height('100%')}
}

三、骨架屏组件（轻量但“像样”）

1️⃣ 骨架屏整体结构

@Component
struct SkeletonLayer {progress: number;opacity: number;build() {Column({ space: 14 }) {SkeletonBlock({ w: '70%', h: 18, r: 8 })SkeletonBlock({ w: '40%', h: 14, r: 8 })Column({ space: 12 }) {ForEach([1, 2, 3, 4, 5], () => {Column({ space: 10 }) {SkeletonBlock({ w: '100%', h: 120, r: 12 })Row({ space: 10 }) {SkeletonBlock({ w: '22%', h: 14, r: 8 })SkeletonBlock({ w: '30%', h: 14, r: 8 })SkeletonBlock({ w: '18%', h: 14, r: 8 })}}})}Text(`加载中… ${this.progress}%`).fontSize(12).opacity(0.6)}.padding(16).width('100%').height('100%').backgroundColor('#FFFFFF').opacity(this.opacity)}
}

单个骨架块（带轻微流光）

@Component
struct SkeletonBlock {w: string;h: number;r: number;@State shimmerOffset: number = -60;aboutToAppear() {setInterval(() => {animateTo({ duration: 900, curve: Curve.Linear }, () => {this.shimmerOffset =this.shimmerOffset >= 260 ? -60 : this.shimmerOffset + 80;});}, 950);}build() {Stack() {Rect().width(this.w).height(this.h).radius(this.r).opacity(0.12)Rect().width('30%').height(this.h).radius(this.r).translate({ x: this.shimmerOffset }).opacity(0.08)}}
}