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

2024-04-28 14:05:39

为了优化用户体验，骨架屏一直是开发者比较喜欢的表现方式，也就是首屏占位的一种表现方式，不会让浏览者因为长时间的等待而焦躁。小程序中骨架屏的实现还是比较简单的，但是没用过的同学难免会误入歧途，今天就分享一下小程序中骨架屏的实现。

什么是骨架屏

骨架屏是页面的一个空白版本，通常会在页面完全渲染之前，通过一些灰色的区块大致勾勒出轮廓，待数据加载完成后，再替换成真实的内容。通常在小程序中，我们需要手工维护骨架屏的代码，当业务变更时，同样需要对骨架屏代码进行调整。为了开发的便利，开发者工具提供了自动生成骨架屏代码的能力。

小程序中骨架屏的生成方式

微信开发者工具可以为当前页面生成骨架屏，工具入口位于模拟器面板右下角三点处。

引入方法

骨架屏代码通过小程序模板（template）的方式引入以 pages/index/index 页面为例，引入方式如下。

<!-- pages/index/index.wxml 引入模板 -->
<import src="index.skeleton.wxml"/>
<template is="skeleton" wx:if="{{loading}}" data="{{}}"/>

/* pages/index/index.wxss 中引入样式 */
@import "index.skeleton.wxss";

显示与隐藏

与普通的模板相同，通过 wx:if 控制显示隐藏。
可以设置延迟加载，或者在页面所有数据请求成功之后隐藏骨架屏。

延迟加载的代码放在 onLoad 生命周期中，代码如下：

   // 渐进式加载数据，逐步隐藏 loadingprogressiveLoad() {setTimeout(() => {this.setData({loading: false})}, 1000)},onLoad() {this.progressiveLoad()  // 渐进式加载数据，逐步隐藏 loading}

开发者还可以根据需要设置文字、图片、按钮的颜色和形状，同时可根据 excludes、remove、hide等忽视或隐藏部分页面元素，以获取更优的展示效果。具体配置见骨架屏官方文档

微信小程序：骨架屏的实现方法相关推荐

微信小程序 - 骨架屏
骨架屏 - "与其等待网络加载,不如提前给点暗示" 注:不适用复杂交互效果演示示例解释以及使用全在index.wxml中,观看需了解组件使用. 示例下载:微信小程序-骨架屏演示 ...
微信小程序---骨架屏实现，实现起来超级简单
一.什么是骨架屏? 骨架屏是页面的一个空白版本,通常会在页面完全渲染之前,通过一些灰色的区块大致勾勒出轮廓,待数据加载完成后,再替换成真实的内容.通常在小程序中,我们需要手工维护骨架屏的代码,当业务变 ...
电脑版微信小程序全屏显示方法，手机横屏方法。
电脑版微信小程序全屏显示方法: 在app.json中加入:"resizable": true 注意要与"pages"同级,网上有许多错误方法! 手机横屏方法: ...
微信小程序setinterval_微信小程序中setInterval的使用方法
微信小程序中setinterval的使用方法看了下小程序的画布功能,简单的使用了一下,用蹩脚的逻辑做了个 "弹啊弹,弹走鱼尾纹的小球",一起来看下吧.过程不重要主要是画布的使用哦 ...
[微信小程序开发] 用wx.navigateTo方法跳转到tabBar中被定义了的页面将无法跳转
[微信小程序开发] 用wx.navigateTo方法跳转到tabBar中被定义了的页面将无法跳转举例: main.js中: tabBar中定义了页面"pages/test/main&qu ...
微信小程序中下载app的方法
微信小程序中下载app的方法因为微信小程序本身是不推荐引流到外部的,所以正规的方法其实都是被禁止掉的,大致方向是打开内部浏览器,进入应用宝下载页面(如果app接入应用宝),或者是通过右上角的在系统浏 ...
微信小程序全屏背景图
微信小程序全屏背景图,解决你在设置过程中出现的多次背景图重复出现的问题 wxml <view class="container" style="height: {{ ...
java监听微信_一种基于java后台应用监控微信小程序的用户访问量的方法与流程...
本发明涉及java应用与微信小程序应用开发技术领域,具体涉及一种基于java后台应用监控微信小程序的用户访问量的方法. 背景技术: 微信小程序,简称小程序,是一种不需要下载安装即可使用的应用,它实现了 ...
html制作炸金花,微信小程序怎么制作炸金花?微信小程序制作炸金花的方法
很多朋友喜欢玩炸金花游戏,那么怎么在微信小程序上制作炸金花呢?下面就是小编带来的完整详细的教程,想要学习的小伙伴就赶紧看过来吧. 微信小程序怎么制作炸金花?微信小程序制作炸金花的方法 app.json ...
微信小程序转二维码方法分享
微信小程序转二维码方法分享需要转码的可以看看这个东西是看个人需求的,618就要来了,各种活动也将来袭有些小伙伴不知道怎么生成为了方便小程序邀请活动没法外发,这里分享下将小程序转二维码的方法首 ...

最新文章

热门文章