微信小程序:骨架屏的实现方法

news2025/1/18 7:29:13

骨架屏是为了展示一个页面骨架而不含有实际的页面内容,从渲染效率上来讲,骨架屏它并不能使首屏渲染加快。由于骨架屏的一些使用又向用户渲染了额外的一些内容,这些内容是额外添加的、本来是不需要渲染的,它反而从整体上加长了首屏渲染的一个时长。

为了避免白屏现象的一个出现,可以这样优化:开发者可以在这个数据完成加载之前使用骨架屏和Loading提示,在这个数据完成之后将骨架屏和Loading做不渲染的一个处理,再展示真正的一个页面内容

一般具体的做法是这样:

  • 在数据源对象中设定一个loading提示变量值并将初始值设置为true;
  • 数据加载完成以后再将loading变量通过setData方法设置为false;
  • 在WXML这个页面里面通过loading变量切换骨架屏内容以及Loading提示还有真正页面内容的一个显示。

生成骨架屏的方法:

1、点击生成骨架屏,小程序会自动生成两个文件(骨架屏);

 2、按照文件提示,京创建好的文件引入对应文件中;

 3、在接口调用完成之后将loading设置为false,使骨架屏不显示;

 效果如下:

 补充:有时候可能会出现实际的页面和骨架屏发生重影的现象,可以在实际页面的view标签上加一个wx:else的条件,使骨架屏和世界页面不会同时出现。

 在使用骨架屏时有三点需要注意:

  • 第一点在data数据对象中默认设置loading等于true;
  • 第二点就是不要直接修改生成的骨架屏的一个代码;
  • 第三点就是不要过度去使用骨架屏:一般只给主页去添加骨架屏效果,因为骨架屏是小程序提供的一种优化用户体验的一个机制,但其实任何的一个渲染都有消耗,骨架屏也是。

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

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

相关文章

Windows 虚拟磁盘驱动开发(采用原始办法实现类似Storport框架的相同功能)

其实以前讲述windows平台下的磁盘驱动的开发挺多,而且时间也是非常早。以下连接:https://blog.csdn.net/fanxiushu/article/details/9903123?spm1001.2014.3001.5501https://blog.csdn.net/fanxiushu/article/details/11713357?spm1001.2014.3001.5501…

游戏开发 状态同步

【状态同步】1、将所有的操作发送给Server(T1),由Server计算(T2),并返回结果(T3)。权威服务器架构能够防止很多的作弊,但是直接用这种方法会让游戏的响应变得迟缓。如果 …

three games 之 桌球

接下来介绍一些 Vue4 中的一些进阶使用,希望对大家有所帮助,谢谢。 如果文中有不对、疑惑的地方,欢迎在评论区留言指正🌻 一、项目结构 Vuex 并不限制你的代码结构。但是,它规定了一些需要遵守的规则: …

移动硬盘怎么分区?

硬盘分区指的是硬盘上被划分出来的区块,可用于分类存储各种数据。而我们日常购买的移动硬盘通常来说分为两种,一种是买回来已分好区的,还有一种是未经过分区的。如果移动硬盘没有经过分区,那么在将它连接到电脑的USB接口时&#x…

android四大组件之四-BroadCast实现原理分析

前言: 一开始的目标是解决各种各样的ANR问题的,但是我们知道,ANR总体上分有四种类型,这四种ANR类型有三种是和四大组件相对应的,所以,如果想了解ANR发生的根因,对安卓四大组件的实现原理必须要…

伙伴云与飞书、金山办公一同入选亿欧2022中国数字化企业服务商TOP50

近日,由中关村国家自主创新示范区展示中心、中关村会展与服务产业联盟与亿欧联合举办的SHOWTECH2022-WIM 创新者年会”在京顺利召开,会上,亿欧网重磅发布《2022世界创新奖榜单》。伙伴云凭借10年来为企业数字化转型赋能的成功经验和卓越贡献&…

数据结构学习-队列

坚持看完,结尾有思维导图总结 这里写目录标题队列的定义于性质如何实现队列的功能初始化队列入队列出队列队列的销毁队列取队头数据队列取队尾数据判断队列是否为空判断队列长度总结队列的定义于性质 队列是一种数据结构,他储存数据的方式就和排队一样 …

二十六、Kubernetes中Horizontal Pod Autoscaler(HPA)控制器详解

1、概述 在kubernetes中,有很多类型的pod控制器,每种都有自己的适合的场景,常见的有下面这些: ReplicationController:比较原始的pod控制器,已经被废弃,由ReplicaSet替代 ReplicaSet&#xff…

年终盘点(三)丨2022计讯物联团队不负韶华,奋力前行

光阴荏苒,时光悄然,成长的齿轮不断转动。2022年,计讯人在挑战中创造不凡,2023年,计讯人在希望中迎接新未来。 回首过去,计讯物联团队不断壮大,在奋勇前行中以坚持书写拼搏,在知难而…

记好这24个ES6方法,用于解决实际开发的JS问题

本文主要介绍24中es6方法&#xff0c;这些方法都挺实用的&#xff0c;本本请记好&#xff0c;时不时翻出来看看。 1.如何隐藏所有指定的元素 1 const hide (el) > Array.from(el).forEach(e > (e.style.display none)); 2 3 // 事例:隐藏页面上所有<img>元素? …

echarts——实现 面积图+柱状图+折线图等——基础积累

因为到年底了&#xff0c;很多项目组都开始做年终汇报&#xff0c;年终汇报的展示形式最常见的就是看板。 样式美观&#xff0c;可以放到电视机或者大屏上&#xff0c;通过图表的形式进行展示&#xff0c;简单明了&#xff0c;通俗易懂。 直接上最终效果图&#xff1a;是一个…

【C++】打开C++的大门

目录前言1.什么是C2.C的发展史3.C关键字&#xff08;C98&#xff09;4.命名空间4.1命名冲突4.2命名空间定义4.3命名空间使用5.输入输出6.缺省参数6.1缺省参数的概念6.2缺省参数分类7.函数重载7.1函数重载概念7.2C函数重载的原理——名字修改8.引用8.1引用的概念8.2引用特性8.3常…

ArcGIS基础实验操作100例--实验94计算栅格图层总和值

本实验专栏参考自汤国安教授《地理信息系统基础实验操作100例》一书 实验平台&#xff1a;ArcGIS 10.6 实验数据&#xff1a;请访问实验1&#xff08;传送门&#xff09; 空间分析篇--实验94 计算栅格图层总和值 目录 一、实验背景 二、实验数据 三、实验步骤 &#xff08;…

【观察】软硬件底层创新“开花结果”,亚马逊云科技的沉淀与释放

2006年&#xff0c;亚马逊云科技推出了Amazon Web Services&#xff0c;正式“开创”出了云计算市场。同年8月&#xff0c;Amazon Elastic Compute Cloud (EC2) 开放了 beta 测试&#xff0c;启动了云上计算的创新和革命。从此&#xff0c;亚马逊云科技在云计算软硬件底层技术创…

软件测试复习03:动态测试——黑盒测试

作者&#xff1a;非妃是公主 专栏&#xff1a;《软件测试》 个性签&#xff1a;顺境不惰&#xff0c;逆境不馁&#xff0c;以心制境&#xff0c;万事可成。——曾国藩 文章目录等价划分法边值分析法错误推测法因果图法示例习题等价划分法 等价类&#xff1a;一个几何&#xf…

阿里云 gradle maven配置中心地址

仓库名称阿里云仓库地址阿里云仓库地址(老版)源地址centralhttps://maven.aliyun.com/repository/centralhttps://maven.aliyun.com/nexus/content/repositories/centralhttps://repo1.maven.org/maven2/jcenterhttps://maven.aliyun.com/repository/publichttps://maven.aliyu…

dp(五) 最长公共子串

最长公共子串_牛客题霸_牛客网 描述 给定两个字符串str1和str2,输出两个字符串的最长公共子串 题目保证str1和str2的最长公共子串存在且唯一。 数据范围&#xff1a; 1≤∣str1∣,∣str2∣≤50001≤∣str1∣,∣str2∣≤5000 要求&#xff1a; 空间复杂度 O(n2)O(n2)&#x…

【阶段三】Python机器学习22篇:机器学习项目实战:GBDT分类模型

本篇的思维导图: 项目实战(GBDT分类模型) 项目背景 应用GBDT算法实现多分类模型,目标是实现GBDT多分类项目的全流程。 数据获取 本次建模数据来源于网络,数据项统计如下: 编号  变量名称 <

聚焦:XuperOS成长计划FAQ

1月12日&#xff0c;百度超级链发布XuperOS成长计划&#xff08;&#x1f449;XuperOS 新年致辞&#xff1a;创世、监督、共建、国际&#xff09;。以下是我们整理的关于成长计划的常见问题&#xff0c;为关心XuperOS的广大朋友答疑解惑。问&#xff1a;XuperChain除了发行这四…

662. 二叉树最大宽度

662. 二叉树最大宽度 难度中等530 给你一棵二叉树的根节点 root &#xff0c;返回树的 最大宽度 。 树的 最大宽度 是所有层中最大的 宽度 。 每一层的 宽度 被定义为该层最左和最右的非空节点&#xff08;即&#xff0c;两个端点&#xff09;之间的长度。将这个二叉树视作…