微信小程序骨架屏的实现示例

目录
  • 什么是骨架屏
  • 小程序中骨架屏的生成方式
  • 引入方法
  • 显示与隐藏

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

什么是骨架屏

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

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

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

引入方法

骨架屏代码通过小程序模板（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 生命周期中，代码如下：

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

  onLoad() {
    this.progressiveLoad()  // 渐进式加载数据，逐步隐藏 loading
  }

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

到此这篇关于微信小程序骨架屏的实现示例的文章就介绍到这了,更多相关小程序骨架屏内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 如何在微信小程序中使用骨架屏的步骤

    本文介绍了微信小程序中使用骨架屏,分享给大家,具体如下: 先上效果图 ​ 骨架屏主要起到占位作用,向用户说明该区域有内容,有一定的心理准备. 聊聊背景:刚上线一款小程序,随着上架的东西越来越多,微信小程序加载越来越慢,会出现一段时间的白屏(大概2-3s),这对用户体验上来讲特别不友好.所以在网上开始找这方面的资料,骨架屏主要分为两种方案,下面来说说这两种方案. 1.为每个需要使用骨架屏的页面定制一套静态页面.这种方法缺点很明显,需要为每个页面单独定制,布局如果修改则需要同时修改两个页面,增加了维

  • taro小程序添加骨架屏的实现代码

    最近做了一些小程序方面的性能优化,如分包加载,添加骨架屏等,这次主要说一下骨架屏的相关内容. 关于骨架屏,有三种方法: 1.直接请UI同学帮忙P张图,当做loading图放上去.这种方法简单粗暴,但是需要请人帮忙~ 2.根据每个页面,自己写一套相同的代码来覆盖样式.这种方法的工程量,你懂的~ 3.能不能写个组件呢?该组件自动获取元素位置大小信息来渲染,数据返回后将其卸载. 下面主要说第三种方法~ 主框架采用taro,一套代码兼容多端,但是今天这个代码,需要考虑兼容性~ 根据上面的思路,我们首先要

  • 更优雅的微信小程序骨架屏实现详解

    更优雅的微信小程序骨架屏实现详解

    一.演示 二.说明: 实现思路:需要默认数据,这样才能完美应对list,wx:if的情况,及flex宽度靠内容撑开的样式. 替换思路:和imageLoader加载器类似:先展示默认图片,拿到数据之后显示真实的图片 具体实现: 页面准备一份默认数据:defaultData xml中:<skeleton watchData={{与卡槽笨蛋一样的对象}}><slot/></skeleton> 页面onload时,data=defaultData 此时:watchData第一次

  • 小程序如何构建骨架屏

    小程序如何构建骨架屏

    首屏 一般情况下,在首屏数据未拿到之前,为了提升用户的体验,会在页面上展示一个loading的图层,类似下面这个 其中除了菊花图以外网上还流传这各种各样的loading动画,在PC端上几乎要统一江湖了,不过最近在移动端上面看到不同于菊花图的加载方式,就是这篇文章需要分享的Skeleton Screen,中文称之为"骨架屏" 概念 A skeleton screen is essentially a blank version of a page into which informati

  • 微信小程序骨架屏的实现示例

    微信小程序骨架屏的实现示例

    目录 什么是骨架屏 小程序中骨架屏的生成方式 引入方法 显示与隐藏 为了优化用户体验,骨架屏一直是开发者比较喜欢的表现方式,也就是首屏占位的一种表现方式,不会让浏览者因为长时间的等待而焦躁.小程序中骨架屏的实现还是比较简单的,但是没用过的同学难免会误入歧途,今天就分享一下小程序中骨架屏的实现. 什么是骨架屏 骨架屏是页面的一个空白版本,通常会在页面完全渲染之前,通过一些灰色的区块大致勾勒出轮廓,待数据加载完成后,再替换成真实的内容.通常在小程序中,我们需要手工维护骨架屏的代码,当业务变更时,同样

  • 微信小程序骨架屏的应用与实现步骤详细记录

    微信小程序骨架屏的应用与实现步骤详细记录

    目录 什么是骨架屏 小程序骨架屏的实现 1. 生成页面骨架 2. 骨架屏的应用 3. 使用注意 4. 思考后的封装 总结 什么是骨架屏 骨架屏是作为一种首次渲染加载优化的一种方法 我们打开一个应用后,应用会通过ajax来请求数据,而在这段空缺的时间,没有数据,内容缺失,这对于用户的感觉很不好,所以我们需要在这个时间段内通过骨架屏来填充这个空缺. 如上图所示,一个是没有内容,一个是骨架屏的填充,所以在加载的这一秒内给用户以骨架屏形式的填充是很有必要的. 小程序骨架屏的实现 1. 生成页面骨架 微信

  • 微信小程序虚拟列表的实现示例

    微信小程序虚拟列表的实现示例

    目录 前言 分析 初始渲染方法 初步优化 进一步优化 方法二 前言 大部分小程序都会有这样的需求,页面有长列表,需要下拉到底时请求后台数据,一直渲染数据,当数据列表长时,会发现明显的卡顿,页面白屏闪顿现象. 分析 请求后台数据,需要不断的setData,不断的合并数据,导致后期数据渲染过大 渲染的DOM 结构多,每次渲染都会进行dom比较,相关的diff算法比较耗时都大 DOM数目多,占用的内存大,造成页面卡顿白屏 初始渲染方法 /* * @Descripttion: * @version: *

  • 微信小程序form表单组件示例代码

    微信小程序form表单组件示例代码

    表单,将组件内的用户输入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/> 提交. 当点击<form/>表单中 formType 为 submit 的<button/>组件时,会将表单组件中的 value 值进行提交,需要在表单组件中加上 name 来作为 key. 属性名 类型 说明 report-submit Boolean 是否返回fo

  • uni-app使用微信小程序云函数的步骤示例

    uni-app使用微信小程序云函数的步骤示例

    创建云函数目录 首先,我们需要在uni-app项目文件夹下,创建一个云函数目录,路径随意,我这里是functions.然后先随便在里面放一些文件,这里以new_file.css为例.(放文件的原因是:确保编译成小程序后cloudfunctions文件夹存在.如果该文件夹下没有文件,默认是不会在微信小程序开发平台中显示该文件夹的.) 修改manifest.json 在uni-app根目录下,修改manifest.json中的微信小程序项,结构如下 "mp-weixin" : { /* 小

  • 微信小程序 获取手机号 JavaScript解密示例代码详解

    微信小程序 获取手机号 JavaScript解密示例代码详解

    当我们在开发微信小程序中,有一个常用的功能,就是获取用户的手机号,然后一键登入小程序,那么手机号如何获取呢?请认真看完本文,保证可以获取到用户的手机号. 刚开始开发微信小程序的时候,想着实现手机验证码登入,后来查阅资料得知,发给用户的短信是要自己付费的.后来想想,微信获取用户的手机号一样可以保证手机号码的真实性,因为手机号既然可以绑定微信,那么肯定是被严格核验过的,然后就开始了获取手机号之旅,网上教程有很多,但不知什么原因,都是会少一些内容,有的只有前端代码,没有后端:有的后端代码是PHP,不是

  • 微信小程序实现手势解锁的示例详解

    微信小程序实现手势解锁的示例详解

    目录 一.项目展示 二.设置手势.手势解锁 三.手势重置 一.项目展示 这是一款简单实用的手势解锁工具 手势解锁是当下常用的解锁方式 本实例以工具的形式 可以嵌入到不同的项目之中 二.设置手势.手势解锁 wxlocker.prototype.storePass = function(psw,cb) {// touchend结束之后对密码和状态的处理 if (this.pswObj.step == 1) {//step==1表示还没有设置密码状态 if (this.checkPass(this.p

  • 微信小程序全屏滚动字幕的实现方法详解

    微信小程序全屏滚动字幕的实现方法详解

    目录 一.实现背景 二.实现代码 三.滚动速度 四.后续优化 实现效果 一.实现背景 无意中在某音上看到用手机横屏作为广告屏的视频,大部分都是用第三方软件实现的: 以及在汽车后挡风玻璃放置提醒字样的视频,这种基本是要花钱买屏幕,通过手机控制屏幕内容: 遂想实现这种效果 二.实现代码 1,滚动字幕 zimu.wxml,界面布局,很简单,没啥特别的,顶部一个返回按钮,为了不影响整体效果,可以把这个按钮做成透明的图片放上去:除了那个按钮剩下的就是滚动的字幕组件了 <!--pages/zimu/zimu

  • 微信小程序picker组件简单用法示例【附demo源码下载】

    微信小程序picker组件简单用法示例【附demo源码下载】

    本文实例讲述了微信小程序picker组件简单用法.分享给大家供大家参考,具体如下: picker滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器(mode=selector),时间选择器(mode=time),日期选择器(mode=date),默认是普通选择器. 具体功能说明如下: 普通选择器:mode=selector 属性名 类型 默认值 说明 range Array [] mode为selector时,range有效 value Number 0 mode为selecto

随机推荐