微信小程序 首屏空白 业务代码加载时间过长 用 骨架屏组件 解决报错： ＜swiper-item＞: 建议在子节点上设置样式

骨架屏是页面的一个空白版本，开发者会使用 CSS 绘制一些灰色的区块，将页面内容大致勾勒出轮廓。
通常会在页面完全渲染之前，将骨架屏代码进行展示，待数据加载完成后，再替换成真实的内容。
再进行项目开发时，我们需要手工维护骨架屏的代码，当业务变更时，同样需要对骨架屏代码进行调整。
为了方便开发者进行骨架屏的绘制，开发者工具提供了自动生成骨架屏代码的能力。

1、首先打开微信开发者工具 点击 右下角【…】

2.弹出确认框

3.点击 【确定】，这时候就会在index 文件夹下生成两个文件 index.skeleton.wxml、index.skeleton.wxss

4.在index目录新建 skeleton 文件夹 把 index.skeleton.wxml、index.skeleton.wxss 移动进skeleton文件夹中
5.在index.wxml文件中引入

6.在 index.scss 文件中 引入skeleton

@import "./skeleton/index.skeleton.scss";

7.在 index.js 文件定义 loading 初始值为 true 并在请求结束后 set 下loading的状态为false

注意：
控制台报错：: 建议在子节点上设置样式

打开 【index.skeleton.wxm】文件 修改 swiper-item 给它加个 class 然后剪切style里的样式 在wxss 中粘贴

 <swiper autoplay="false" indicator-dots="true" class="swiper-class" indicator-active-color="#fff" interval="5000" current="0">
        <swiper-item class="swiper-item-1">
          <image class="swiper-class-image sk-image"></image>
        </swiper-item>
      </swiper>

.swiper-item-1 {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: translate(0%, 0px) translateZ(0px);
}

这样控制台就不会提示警告了