小程序生成骨架屏

骨架屏

• 点击右下角三个点 生成骨架屏 有两个文件 （骨架屏的模板文件 和样式和文件）
• 把模板和样式引入到页面中

<import src="./sort.skeleton.wxml"/>

<template is="skeleton"/>


@import 'sort.skeleton.wxss';

• 把模板和实际内容 二选一出现 定义一个load变量 判断数据是否加载完成

• 全局配置 骨架屏的样式 页面样式会覆盖全局

// project.config.json
{
  "skeleton-config": {
    "global": {
      // 默认的全局配置
      "loading": "",
      "text": {
        "color": "#EEEEEE"
      },
      "image": {
        "shape": "",
        "color": "#EFEFEF",
        "shapeOpposite": []
      },
      "button": {
        "color": "#EFEFEF",
        "excludes": []
      },
      "pseudo": {
        "color": "#EFEFEF",
        "shape": "circle",
        "shapeOpposite": []
      },
      "excludes": [],
      "remove": [],
      "empty": [],
      "hide": [],
      "grayBlock": [],
      "showNative": false,
      "backgroundColor": "transparent",
      "mode": "fullscreen",
      "templateName": "skeleton",
      "cssUnit": "rpx",
      "decimal": 4,
    },
    "pages": {
      "pages/index/index": {
        // 页面配置，key 为页页面路径
      }
    }
  }

注意：每次修改 project.config.json 里的样式 都要重新生成骨架屏进行替换