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

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

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

什么是骨架屏

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

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

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

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

引入方法

骨架屏代码通过小程序模板(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等忽视或隐藏部分页面元素,以获取更优的展示效果。具体配置见骨架屏官方文档

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

免责声明:
1、本网站所有发布的源码、软件和资料均为收集各大资源网站整理而来;仅限用于学习和研究目的,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。 不得使用于非法商业用途,不得违反国家法律。否则后果自负!

2、本站信息来自网络,版权争议与本站无关。一切关于该资源商业行为与www.niceym.com无关。
如果您喜欢该程序,请支持正版源码、软件,购买注册,得到更好的正版服务。
如有侵犯你版权的,请邮件与我们联系处理(邮箱:skknet@qq.com),本站将立即改正。

NICE源码网 JavaScript 微信小程序骨架屏的实现示例 https://www.niceym.com/18225.html

常见问题
  • 请您联系网站客服QQ,79024519,将第一时间处理您的问题,咨询请提供会员ID以及资源编号!
查看详情
  • 本站发布的压缩包如遇需要解压密码请尝试本站域名:www.niceym.com (通常为小写,如不对可试试大写) 或者:niceym.com 如遇无法解压,请您提供资源编号发送给本站客服!
查看详情