微信小程序---骨架屏组件

骨架屏是页面的一个空白页面，开发者会使用css绘制一些灰色区块，将页面内容大致勾勒出轮廓，通常会在页面完全渲染之前，将骨架代码进行展示，待数据加载完成之后，再替换成真实的内容，骨架屏的设计旨在优化用户体验。

在进行项目开发时，我们需要手工维护骨架屏的代码，当业务更换时，同样需要对骨架屏代码进行调整。

使用步骤：

1.使用微信开发者工具为当前预览的页面生成骨架屏代码，工具入口位于模拟器面板右下角三点处

2.在当前页面的文件夹创建新的文件夹 例子：skeleton ，将新生成的文件index.skeleton.scss，index.skeleton.wxml文件移入新的文件夹中skeleton，按照

在 index.wxml 引入模板

```
<import src="index.skeleton.wxml"/>
<template is="skeleton" wx:if="{{loading}}" />
```

在 index.wxss 中引入样式
```
@import "./index.skeleton.wxss";
```

按照要求导入样式

.wxml文件
<!-- 引入骨架屏 -->
<import src="./skeleton/index.skeleton.wxml"/>
<!-- 使用骨架屏 -->
<template is="skeleton" wx:if="{{loading}}" />

<view wx:else class="index-container">
.....页面框架
</view>


.js文件
data{

    loading：true  // 骨架屏是否显示
}

注意事项：

1.如果调试器出现警告，且保存后出现模版编译不成功，将行内样式写成内部样式