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

article/2025/9/15 4:49:03

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

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

一般具体的做法是这样:

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

生成骨架屏的方法:

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

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

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

 效果如下:

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

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

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

http://chatgpt.dhexx.cn/article/sAGhJIM1.shtml

相关文章

客户端骨架屏详解

一直以来,无论是Web还是iOS、Android的应用中,为了提升应用的加载等待这段时间的用户感知体验,各种技术层出不穷。其中,尤以菊花图以及由它衍生各种加载动画最为突出。 对于菊花图我们自不必多说,现在对于加载的设计体…

微信小程序使用骨架屏

骨架屏的使用越来越广泛。在微信小程序中使用骨架屏如果自己实现,不同的页面对应不同的骨架屏,会有一定难度;不过,微信小程序已经提供生成骨架屏功能,使得我们在开发中非常方便,下面介绍如何生成 在生成骨架…

Skeleton Screen — 骨架屏

用户体验一直是前端开发需要考虑的重要部分,在数据请求时常见到锁屏的loading动画,而现在越来越多的产品倾向于使用Skeleton Screen Loading(骨架屏)替代,以优化用户体验。 一种自动生成网页骨架屏的方式 前端骨架屏方案小结 Skeleton Scree…

element-骨架屏

使用场景&#xff1a;在需要等待加载内容的位置设置骨架屏。 主要代码&#xff1a;&#xff08;其中loading控制骨架屏的显示不显示&#xff0c;为false时不显示&#xff0c;为true时显示&#xff09; <template><div v-show"!loading"><!-- 第一行…

浅谈前端骨架屏方案

在图片与前端体验优化中&#xff0c;最重要的莫过于「骨架屏」了&#xff0c;因为它和“首屏体验”息息相关。 目前来说骨架屏基本上有两种方式&#xff1a; HTML CSS&#xff1a;主流。基本是自己在项目中以侵入式方式围绕html“定制”&#xff1b;微信小程序的骨架屏生成方…

前端骨架屏应用

什么是骨架屏 骨架屏可以理解为在页面数据尚未返回或页面未完成完全渲染前&#xff0c;先给用户呈现一个由灰白块组成的当前页面大致结构&#xff0c;让用户产生页面正在逐渐渲染的感受&#xff0c;从而使加载过程从视觉上变得流畅。 生成后的骨架屏页面如下图所示&#xff1…

如何实现骨架屏效果?

今天我们来用原生js实现一个骨架屏的效果&#xff0c;效果如下&#xff1a; 首先思考如何实现 思考实现方式 骨架屏的原理是在数据没加载出来的时候&#xff0c;使用滚动的背景颜色去替代&#xff0c;等到加载完毕后则显示对应内容 那么我们的核心就是实现一个.skeleton的样…

啥是骨架屏

&#xff08;一&#xff09;什么是骨架屏 骨架屏可以理解为是当数据还未加载进来前&#xff0c;页面的一个空白版本。在页面完全渲染完成之前&#xff0c;用户会看到一个样式简单&#xff0c;描绘了当前页面的大致框架的页面&#xff0c;然后骨架屏中各个占位部分被实际资源完…

前端骨架屏方案与实践

对于依赖接口渲染的页面&#xff0c;在拿到数据之前页面往往是空白的&#xff0c;为了提示用户当前正在加载中&#xff0c;往往会使用进度条、loading图标或骨架屏的方式。 对于前两种方案而言&#xff0c;实现比较简单&#xff1b;本文主要研究骨架屏的实现方案。 骨架屏(Ske…

网页骨架屏自动生成方案(dps)

来源&#xff1a;花满楼 https://zhuanlan.zhihu.com/p/74403911 什么是骨架屏&#xff1f; 什么是骨架屏呢&#xff1f;骨架屏(Skeleton Screen)是指在页面数据加载完成前&#xff0c;先给用户展示出页面的大致结构&#xff08;灰色占位图&#xff09;&#xff0c;在拿到接口数…

骨架屏

&#xff08;一&#xff09;什么是骨架屏 骨架屏可以理解为是当数据还未加载进来前&#xff0c;页面的一个空白版本。在页面完全渲染完成之前&#xff0c;用户会看到一个样式简单&#xff0c;描绘了当前页面的大致框架的页面&#xff0c;然后骨架屏中各个占位部分被实际资源完…

Vue中实现骨架屏的多种方式

vue-cli项目首页加载缓慢想要使用骨架屏效果&#xff0c;经过几天的实践&#xff0c;这里学习并记录一下vue项目自动生成骨架屏方法。 前言&#xff1a;骨架屏的作用主要是在网络请求较慢时&#xff0c;提供基础占位&#xff0c;当数据加载完成&#xff0c;恢复数据展示。这样给…

骨架屏原理——面试别再被挨打了

目录 前言 骨架屏是什么 骨架屏原理 用途&#xff1a; &#xff08;一&#xff09;简单实现 &#xff08;二&#xff09; vue项目中的构建 &#xff08;三&#xff09;自动化方案 前言 同样是之前练手项目中的&#xff0c;emmm,知道干嘛用的&#xff0c;没了解过具体原理…

性能测试总结之内存泄露和内存溢出

刚刚做完了一个项目的性能测试&#xff0c;“有幸”也遇到了内存泄露的案例&#xff0c;所以在此和大家分享一下。 主要从以下几部分来说明&#xff0c;关于内存和内存泄露、溢出的概念&#xff0c;区分内存泄露和内存溢出&#xff1b;内存的区域划分&#xff0c;了解GC回收机…

内存泄露与内存溢出的区别及解决方法

内存溢出与泄露的区别 内存溢出 out of memory&#xff0c;是指程序在申请内存时&#xff0c;没有足够的内存空间供其使用&#xff0c;出现out of memory&#xff1b;比如申请了一个integer,但给它存了long才能存下的数&#xff0c;那就是内存溢出。 内存泄露 memory leak&…

jvm故障 内存泄露和内存溢出总结

目录 内存泄漏memory leak 内存泄漏的分类&#xff08;按发生方式来分类&#xff09; 内存泄露的场景 静态集合类 / 长生命周期的对象持有短生命周期对象的引用 / 单例模式 /类加载器 各种连接&#xff0c;如数据库连接、网络连接和IO连接等 变量不合理的作用域 内部类持…

JVM——内存泄漏与内存溢出

内存泄漏与内存溢出 1. 面试题 什么是内存泄漏和什么是内存溢出 (陌陌) Java存在内存泄漏吗&#xff0c;内存泄漏的场景有哪些&#xff0c;如何避免(百度) Java 中会存在内存泄漏吗&#xff0c;简述一下&#xff1f;(猎聘) 内存泄漏是怎么造成的&#xff1f;(拼多多、字节跳动)…

Java中内存溢出和内存泄露详解

1、内存溢出&#xff08;OOM&#xff09; 在程序中导致程序崩溃的两种原因有&#xff1a; ①、空指针、下标越界等异常&#xff0c;这类问题主要原因是因为代码写的有问题 ②、还有一类问题是&#xff0c;代码看着也没有问题&#xff0c;在进行GC时&#xff0c;回收也没有空出足…

内存泄漏和内存溢出的区别

内存泄漏就是在jvm堆中生成的对象&#xff0c;经过垃圾回收器回收后也无法得到有效的释放&#xff0c;则会导致可用的虚拟机可分配的内存越来越少。最终可能导致内存溢出。 以发生的方式来分类&#xff0c;内存泄漏可以分为4类&#xff1a; 1、常发性内存泄漏。发生内存泄漏的…

什么是内存泄漏和内存溢出

目录 一、内存溢出 (OutOfMemory)二、内存泄漏 (Memory Leak) 一、内存溢出 (OutOfMemory) 它是指程序在申请内存时&#xff0c;没有足够的内存空间供其使用&#xff0c;抛出OutOfMemory异常。 比如申请了一个8MB空间&#xff0c;但是当前内存可用空间只有5MB&#xff0c;那么…