渐进式骨架屏实现指南：从入门到下载示例代码全解析-微信公众号学习资源网

在开发过程中，界面数据加载速度的不稳定性较为常见。在这种情况下，渐进式骨架屏便能大显身手。然而，这个骨架屏究竟为何物？又是如何实现的？下面我们来逐一探讨。

什么是渐进式骨架屏

页面加载过程中，各部分数据的获取速度存在区别，导致相关区块展示内容的进度也各有不同。以电商页面为例，商品图片的加载速度可能落后于价格信息。所谓渐进式骨架屏，就是在数据尚未全部加载完毕时，预先展示页面的基本框架，告知用户页面后续将呈现哪些内容。这样的设计可以改善用户等待期间的视觉感受，减轻他们的焦虑情绪。

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

在这里插入图片描述

实现渐进式骨架屏 - 配置区块域

在这里插入图片描述

以pages/index/index文件为例，我们得在index.wxml文件里设置好区块。特别要注意的是，为确保生成的骨架屏与真实数据的位置对齐，页面主模块应采用absolute定位。如果不这样做，可能会出现不少问题，进而影响骨架屏的呈现效果。若你在制作新闻列表页面时未准确定位，那么骨架屏与实际新闻内容很可能会出现不匹配的情况。

实现渐进式骨架屏 - 生成骨架屏代码

在这里插入图片描述

关于制作骨架屏的详细步骤，大家可以在《骨架屏(加载流) 简单入门（第一篇）》一文中找到。骨架屏代码一旦生成，就相当于拥有了页面的初步模型。这实际上是一个预先设定的页面结构，以电商商品列表为例，其中已经明确了商品图片和标题等元素的大致布局。在数据尚未完全加载之前，这样的设计能够先向用户展示页面的基本轮廓。

实现渐进式骨架屏 - 骨架屏传参

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

完成前述步骤后，需要在骨架屏的代码中输入相应的参数。以index.wxml文件为例，需要进行适当的调整。同样，index.skeleton.wxml这个骨架屏文件也需要根据实际情况作出修改，以便满足各种需求。这就像是在玩拼图游戏，每一个参数都相当于一块拼图，只有放到正确的位置，整个骨架屏才能展现出完整的画面。在新闻列表里，参数可能涉及标题行数、图片大小等。

在这里插入图片描述

实现渐进式骨架屏 - js文件属性配置

在这里插入图片描述

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
  }

为了实现屏幕骨架的渐变效果，我们可以利用定时器来控制内容的逐步加载。这就像是一页页纸张缓缓展开，逐渐展现全部内容。以新闻列表页面为例，通过调整定时器的设置，可以使得每条新闻依次显现，如同波浪般逐渐铺开整个新闻列表，从而增强用户在等待过程中的舒适体验。

在这里插入图片描述

效果展示及常见问题

示例代码可在“渐进式骨架屏示例代码 - 下载”页面找到。使用时需留意一些问题。例如，骨架屏仅涵盖首屏显示区域，例如横向滚动的swiper容器，超出屏幕的子元素则不会生成骨架屏。此外，布局建议采用rpx等自适应方案，以便骨架屏能适应不同页面尺寸。部分组件无法生成理想骨架效果，可以添加父容器置灰处理。

 onLoad() {
    //头部加载
    setTimeout(() => {
      this.setData({topBanner: true})
    }, 500)
    //标题加载
    setTimeout(() => {
      this.setData({topNav: true})
    }, 1000)
    //主体内容加载
    setTimeout(() => {
      this.setData({
        loading: false,
        middleContent: true
      })
    }, 2000)
  },