HarmonyOS ArkTS 骨架屏加载显示(二十五)

目录

    • 前言
    • 1、骨架屏代码显示
    • 2、代码中引用
    • 3、效果图展示

前言

所谓骨架屏,就是在页面进行耗时加载时,先展示的等待 UI, 以告知用户程序目前正在运行,稍等即可。 等待的UI大部分是 loading 转圈的弹窗,有的是自己风格的小动画。其实大同小异。而骨架屏无非也是一个等待的UI。基本是由各种灰色块组成,夹杂着一些代表特殊样式的其他浅颜色的色块。骨架屏的不用之处就在于这些灰色块的排列组合和真正展示出来的页面样式基本一致。因此骨架屏的展示除了告知用户程序正在加载外,还能让用户大概知道稍后将要展示的内容是什么,给了用户一些期待,从心理上,让用户更愿意等待一会。

1、骨架屏代码显示

/*** 骨架屏显示*/
@Component
export struct ArticleSkeletonView {build() {Row() {Column() {textArea(80, 80)}.margin({ right: 20 })Column() {textArea('60%', 20)textArea('50%', 20)}.alignItems(HorizontalAlign.Start).justifyContent(FlexAlign.SpaceAround).height('100%')}.padding(20).borderRadius(12).backgroundColor('#FFECECEC').height(120).width('100%').justifyContent(FlexAlign.SpaceBetween)}
}@Builder
function textArea(width: number | Resource | string = '100%', height: number | Resource | string = '100%') {Row().width(width).height(height).backgroundColor('#FFF2F3F4')
}

2、代码中引用

@Component
@Preview
export default  struct Index {@State message: string = '首页'webviewController: web_webview.WebviewController = new web_webview.WebviewController();@State simpleList: Array<number> = [1, 2, 3, 4, 5];build() {Row() {Column() {Text(this.message).fontSize(30).fontWeight(FontWeight.Bold)// Button('loadUrl')//   .onClick(() => {//     try {//       // 点击按钮时,通过loadUrl,跳转到www.example1.com//       this.webviewController.loadUrl('www.example.c1om');//     } catch (error) {//       console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);//     }//   })// // 组件创建时,加载www.example.com// Web({ src: 'www.example.com', controller: this.webviewController })//ForEach(this.simpleList, (item: string) => {ArticleSkeletonView().margin({ top: 20 })}, (item: string) => item)}.width('100%')}.height('100%')}

3、效果图展示

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/783762.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JS - const 关键字声明的变量并不是常量

// 1. 赋值给一个变量 const declare function (x) { return x * x; }; 读到这部分时‘ 疑惑注释为什么会是说 把这个函数表达式赋值给一个变量 在 JavaScript 中&#xff0c;使用 const 关键字声明的变量并不是常量&#xff08;immutable&#xff09;&#xff0c;而是常量引用…

vue3路由跳转

在 Vue 3 中&#xff0c;路由跳转通常是通过 Vue Router 实现的。Vue Router 是 Vue.js 官方的路由管理器&#xff0c;它和 Vue.js 深度集成&#xff0c;使构建单页面应用变得易如反掌。 下面是一些在 Vue 3 中使用 Vue Router 进行路由跳转的基本步骤&#xff1a; 安装 Vue …

武汉大学开设 “雷军班”:计算机专业、今年招收 15 名本科生。武汉大学已经联合小米成立了机器系

更多精彩内容在公众号。 3月25日&#xff0c;武汉大学官方网站发布了一则新闻&#xff0c;报道了校长张平文对计算机学院的调研活动。在报道中&#xff0c;张平文校长特别强调了关于“雷军班”及机器人系的发展规划。他表示&#xff0c;希望计算机学院能够立足于更高层次&#…

【python从入门到精通】-- 第三战:输入输出 运算符

&#x1f308; 个人主页&#xff1a;白子寰 &#x1f525; 分类专栏&#xff1a;python从入门到精通&#xff0c;魔法指针&#xff0c;进阶C&#xff0c;C语言&#xff0c;C语言题集&#xff0c;C语言实现游戏&#x1f448; 希望得到您的订阅和支持~ &#x1f4a1; 坚持创作博文…

前端虚拟滚动列表 vue虚拟列表

前端虚拟滚动列表 在大型的企业级项目中经常要渲染大量的数据&#xff0c;这种长列表是一个很普遍的场景&#xff0c;当列表内容越来越多就会导致页面滑动卡顿、白屏、数据渲染较慢的问题&#xff1b;大数据量列表性能优化&#xff0c;减少真实dom的渲染 看图&#xff1a;绿色…

构建 3D+虚拟人+ai 结合虚拟直播间

构建 3D 虚拟人与 AI 结合的虚拟直播间可以通过以下步骤实现&#xff1a; 1. 选择合适的平台和工具&#xff1a; 首先&#xff0c;你需要选择适合构建虚拟直播间的平台和工具。一些常用的平台包括 Unity、Unreal Engine 等&#xff0c;它们提供了强大的 3D 渲染和物理引擎&…

Qt之QSoundEffect播放简单音效

文章目录 前言一、为什么需要他二、QSoundEffect的使用2.1 简单使用2.2 QSoundEffect API2.3 槽函数2.4 信号总结前言 在开发Qt应用程序时,为用户提供音效可以增强用户体验,并且能够使应用程序更加生动和交互。Qt提供了QSoundEffect类,用于播放简单的音效,例如按键音、警告…

Prometheus +Grafana +node_exporter可视化监控Linux + windows虚机

1、介绍 背景&#xff1a;需要对多台虚机进行负载可视乎监控&#xff0c;并进行及时的报警 2、架构图 node_exporter &#xff1a;主要是负责采集服务器的信息。 Prometheus &#xff1a;主要是负责存储、抓取、聚合、查询方面。 Grafana &#xff1a; 主要是…

Pandas | value_counts() 的详细用法

value_counts() 函数得作用 用来统计数据表中&#xff0c;指定列里有多少个不同的数据值&#xff0c;并计算每个不同值有在该列中的个数&#xff0c;同时还能根据指定得参数返回排序后结果。 返回得是Series对象 value_counts(values,sortTrue, ascendingFalse, normalizeFal…

SSTI 服务器端模板注入(Server-Side Template Injection)

1.Web_python_template_injection {{}}是变量包裹标识符&#xff0c;里面存放的是一个变量&#xff0c;当你输入 http://61.147.171.105:55121/{{8*8}} 执行成功&#xff0c;说明存在模版注入。接下来&#xff0c;开始想办法编代码拿到服务器的控制台权限 。 首先&#xff0c…

unity 打包安卓错误汇集

Failed to find target with hash string "android-34’ in: D:Pr 他说找不到sdk34level的我用as打开后卸载又重装&#xff0c;最后解决了 我放到Plugins/Android/下面的Java代码没有被编译 这个不知道为什么。我故意把代码写的有问题&#xff0c;会报错那种&#xff…

Java中常见的锁策略

目录 乐观锁 vs 悲观锁 悲观锁: 乐观锁&#xff1a; 重量级锁 vs 轻量级锁 ⾃旋锁&#xff08;Spin Lock&#xff09; 公平锁 vs 非公平锁 可重⼊锁 vs 不可重入锁 读写锁 乐观锁 vs 悲观锁 悲观锁: 总是假设最坏的情况&#xff0c;每次去拿数据的时候都认为别…

一些常用的命令

onnx模型截断&#xff1a; onnx.utils.extract_model(onnx/mobilenet_v3_small_shape.onnx, onnx/mobilenet_v3_small_shape_truncated.onnx, [input.1], [262]) onnx.utils.extract_model(yolov7seg.onnx, yolov7seg_truncated.onnx, [images], [515, "625", &quo…

nginx 重启nginx脚本文件

原因 nginx 初期布置的时候&#xff0c;经常需要重启&#xff0c;手动的关闭重启nginx太麻烦&#xff0c;写一个重启脚本可以简化操作 文件 新建一个bat批处理文件&#xff0c;内容如下&#xff1a; 进入nginx所在文件夹重新读取配置退出杀死所有的nginx进程启动nginx显示nginx…

js教程(10)

一、日期对象 用来表示时间的对象&#xff0c;可以得到当前系统时间。 1.实例化 在代码中发现了new关键字时&#xff0c;一般将这个操作称为实例化&#xff0c;我们可以用new来创建一个时间对象并获取其值。 //创建当前时间对象 const dateNow new Date(); //创建指定时间对…

AES加密解密算法

一&#xff0c;AES算法概述 AES属于分组加密&#xff0c;算法明文长度固定为128位&#xff08;单位是比特bit&#xff0c;1bit就是1位&#xff0c;128位等于16字节&#xff09; 而密钥长度可以是128、192、256位 当密钥为128位时&#xff0c;需要循环10轮完成加密&#xff0…

Mysql中having和where的区别

having子句与where都是设定条件筛选的语句&#xff0c;有相似之处也有区别。 having与where的区别: having是在分组后对数据进行过滤 where是在分组前对数据进行过滤 having后面可以使用聚合函数 where后面不可以使用聚合 在查询过程中执行顺序&#xff1a;from>where>g…

http和https的区别!

HTTP 明文传输&#xff0c;数据都是未加密的&#xff0c;安全性较差&#xff0c;HTTPS&#xff08;SSLHTTP&#xff09; 数据传输过程是加密的&#xff0c;安全性较好。 使用 HTTPS 协议需要到 CA&#xff08;Certificate Authority&#xff0c;数字证书认证机构&#xff09; …

【Threejs基础教程-光影篇】5.2 Threejs 阴影系统

5.2 Threejs阴影系统 学习ThreeJS的捷径在用光影系统之前threejs是实时光影web端目前没有优质的实时光影实时光影会大幅增加渲染压力没有独显的电脑不建议添加实时光影 阴影配置什么样的灯光可以产生阴影什么样的物体可以产生阴影和接受阴影注意开启阴影渲染灵活运用阴影 平行光…

判断一个数据能否同时被3和5整除

一、运行结果&#xff1b; 二、源代码&#xff1b; # define _CRT_SECURE_NO_WARNINGS # include <stdio.h>int main() {//初始化变量值&#xff1b;int a 0;//提示用户printf("请输入一个整数\n");//获取用户输入数据&#xff1b;scanf("%d", &am…