微信小程序---骨架屏实现，实现起来超级简单

一、什么是骨架屏？

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

二、为什么要用骨架屏

请求数据时都会出现一定的延迟，屏幕从而会出现一大片空白，以前对于这段等待时间的处理大多数都是采用菊花图加载动画或者类似于这种的加载动画。

这种方式请求时页面会卡住，直到请求完成，用户期间无法进行任何的操作，只能看着加载动效图，给人一种死机的感觉，体验差。为了进一步提升用户的体验，于是就出现了另一种加载方式——骨架屏（ Skeleton Screen ）

三、骨架屏效果

未加载完成数据后，展示空白灰色盒子，加载成功后才展示内容

四、实现方法

1、微信开发者工具可以为当前页面生成骨架屏，工具入口位于模拟器面板右下角三点处。生成之后会多出两个文件。index.skeleton.wxml里面有使用步骤

 

 2、引用文件，在index.wxml引用骨架屏，通过skeleton_loading来控制显示/隐藏

 在index.wxss里面调用骨架屏样式

 在index.js里面data将skeleton_loading变为false，等数据请求成功后，将其变为true即可。

注：1、当页面布局改变之后，骨架屏也要重新成功

        2、生成骨架屏后，出现有些图片一样会展示，可以修改index.wxml或index.js将静态资源动态和请求成功后同步获取。切记不要直接更改生成骨架屏文件，除非你只想要一次性，不然后续更改很麻烦。