【微信技术-微信小程序】------- 渐进式骨架屏（加载流）（第二篇）

提示:看如下内容需要了解第一篇:简单入门（骨架屏(加载流) 简单入门（第一篇））

---

下载示例代码地址: 渐进式骨架屏示例代码-下载

一、什么是渐进式骨架屏?

在界面内容加载过程中，获取服务器数据的速度不一致，区块内容对应的接口显示真实内容的进度也不一致，就需要渐进式。

二、实现渐进式骨架屏

接下来就已pages/index/index文件作为示例

1.index.wxml文件配置区块域

//使用 data-skeleton-hide 和 hidden 标识区块域
作用： data-skeleton-hide 属性的节点生成骨架屏时会被替换成 hidden 属性
hidden:是隐藏该元素

示例图：

提示：需要注意的是，为了使真实数据的位置与骨架屏一致，此时应使用 absolute 方式定位页面主模块 （否则很容易导致生成的骨架屏效果不佳出现问题） 看如下图：

2.生成骨架屏代码

可以阅读另一篇文章查看如何生成骨架屏代码和配置：骨架屏(加载流) 简单入门（第一篇）

骨架屏代码文件如下:

3.在骨架屏代码中传入参数

data="{{topBanner,topNav,middleContent}}" //主要作用逐个隐藏骨架屏区块

index.wxml文件如下：

index.skeleton.wxml骨架屏文件如下：

4.index.js文件属性配置

 data: {
    background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
    navs: new Array(5).fill(logo),
    loading: true,//开启骨架屏
    hidden:true,//是否展示内容
    topBanner:false,//头部内容
    topNav:false,//标题内容
    middleContent:false,//主体内容
    list
  }

5.最后实现渐变式骨架屏
提示：通过定时器制作渐进式加载

 onLoad() {
    //头部加载
    setTimeout(() => {
      this.setData({topBanner: true})
    }, 500)
    //标题加载
    setTimeout(() => {
      this.setData({topNav: true})
    }, 1000)

    //主体内容加载
    setTimeout(() => {
      this.setData({
        loading: false,
        middleContent: true
      })
    }, 2000)
  },

三、效果展示

下载示例代码地址: 渐进式骨架屏示例代码-下载

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

推荐其他文章:
【微信技术-微信小程序】------- 骨架屏(加载流) 简单入门（第一篇）
【微信技术-微信小程序】------- 使用Vant-Weapp组件简单入门
【微信技术-微信小程序】------- 使用ColorUI组件简单入门