【微信技术-微信小程序】------ 骨架屏(加载流)示例页面说明

提示： 必须先懂得微信开发工具的使用。

---

前言

如何通过微信小程序使用骨架屏（加载流）。

一、什么是骨架屏？

骨架屏是真实内容在没有加载完成前,需要展示的空白版本,通过一些灰色的区块大致勾勒出轮廓，在完成加载后，填充真实内容。

二、使用骨架屏的步骤

温馨提示：为了更好演示效果，我使用微信提供的示例代码展示

1.微信小程序提供的示例代码地址:

https://developers.weixin.qq.com/s/3AQoEBmh7XhF

2.引入示例代码：

2.1 复制示例代码链接 :https://developers.weixin.qq.com/s/3AQoEBmh7XhF 至浏览器的URI的地址栏。然后点击回车键。

效果图：

2.2 下载后 将会打开微信开发工具，然后点击【导入】将会打开示例代码。

效果图:

3.骨架屏文件

1.后缀名为： .skeleton.wxml， .skeleton.wxss 例如：index.skelento.wxml、index.skeleton.wxss的就是骨架屏代码。 也就说明 index.skelento.wxml 是作为index.wxml页面的骨架屏。

示例图：

4.以 pages/index/index 页面为例,使用骨架屏

温馨提示：index.skeleton.wxml 中 有使用方法说明 下图是我生成新的骨架屏 与你看到例子的使用说明不一致 如下图更直观

示例图:

1.index.wxml文件需要引入如下代码：

<import src="index.skeleton.wxml"/>
<template is="skeleton" wx-if="{{loading}}" data="{{hideCategory, hideGoods, hideFooter, hideBanner}}"/>
//其中的 data=""属性  渐进式加载数据，逐步隐藏 使用 

示例图：

2.index.js文件 data中属性说明

   data: {
    background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],//轮播图背景色
    navs: new Array(5).fill(logo),//示例标题个数
    loading: true,//开启骨架屏加载
    hideCategory: false,//是否显示标题
    hideGoods: false,//是否显示列表
    hideFooter: false,//是否显示尾部
    hideBanner: false,//是否显示头部
    list
  },

js代码示例图：

对应的html代码示例图：

说明：声明 data-skeleton-hide 属性的节点生成骨架屏时会被替换成 hidden 属性，开发者可通过 data 控制其显示/隐藏

3. index.wxss引入如下样式

@import "index.skeleton.wxss";

效果图：

4.渐变式加载骨架屏

index.js文件里有核心代码：

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

  disposableLoad() {
    setTimeout(() => {
      this.setData({
        loading: false,
        hideCategory: true,
        hideGoods: true,
        hideFooter: true,
        hideBanner: true
      })
    }, 2000)
  },

  progressiveLoad() {
    setTimeout(() => {
      this.setData({hideBanner: true})
    }, 500)
    setTimeout(() => {
      this.setData({hideCategory: true})
    }, 1000)
    setTimeout(() => {
      this.setData({
        loading: false,
        hideGoods: true
      })
    }, 2000)
  }

常见问题提示：
1.骨架屏仅包括页面首屏中的可见区域，对于横向滚动的 swiper 等容器，超出屏幕的子元素将被忽略；
2.骨架屏的布局复用开发者的页面布局，需要骨架屏自适应页面尺寸时，页面布局应采用 rpx 等自适应方案；
部分组件如 movable-view、movable-area、rich-text、editor、picker、picker-view、picker-view-column、ad、officail-account和open-data 无法生成理想的骨架效果，可通过添加一个父容器，结合 grayBlock、empty 等配置，将其置灰。
3.请勿修改自动生成的骨架屏的代码，当效果不理想时，建议调整相关配置，这样当页面变更时，仍可自动生成；
4.生成的骨架屏代码中会包含预览时的页面数据，将被用来填充页面；
5.骨架屏通常用于商品列表、新闻列表等页面，对于动画/原生组件较多的页面展示效果不佳；
6.该能力除用于展示首屏骨架外，也可作为局部加载的 loading 样式，可灵活使用；

• 其他文章：

1. 【微信技术-微信小程序】------- 使用Vant-Weapp组件简单入门
2. 【微信技术-微信小程序】------- 使用ColorUI组件简单入门
3. 【微信技术-微信小程序】------ 小程序调用第三方的url地址页面例如调用:www.pipixia.com/index/index.html的页面