小程序开放平台

文档中心
小程序配置
框架接口
XHSML语法参考
2.0架构升级
sjs 语法参考
平台骨架屏(beta)
骨架屏介绍
骨架屏生成(IDE)

骨架屏生成(IDE)

开发
>
框架
>
平台骨架屏(beta)
>
骨架屏生成(IDE)
>
更新时间:2024-12-05 15:38:56

骨架屏的生成(可选)

配置生成规则

在 .json skeleton 字段下追加 options 字段,可用于配置骨架屏一些基本选项:

{
    "navigationBarTitleText": "小程序示例",
    "usingComponents": {},
    // 配置骨架屏字段
    "skeleton": {
        // 指定骨架屏路径 (注:平台默认加载 [name].skeleton.css 文件)
        "path": "./component.skeleton.xhsml"
    }
}

options 参数

参数名称
必填
默认值
说明
animationshine动画模式,支持 shine、shine2 两种骨架动画
minGrayBlockWidth0最小处理灰色块的宽度
minGrayPseudoWidth0最小处理伪类宽

xhsml 节点属性

IDE 的自动生成工具,将基于当前页面渲染结构,自动生成骨架内容。 开发者可结合实际业务场景,通过在 xml 标签上配置对应属性,对生成节点进行移除、忽略或指定背景色等,从而使得生成的骨架图更加美观:

参数名称
说明
data-skeleton-remove指定进行移除的 xml 节点属性
data-skeleton-ignore指定忽略不进行任何处理的 xml 节点属性
data-skeleton-empty将某 xml 的innerHTML置为空字符串
data-skeleton-bgcolor指定在某 xml 节点中添加的背景色

示例:

<xhs-view data-skeleton-remove>hello</xhs-view>
<xhs-view data-skeleton-ignore>hello</xhs-view>
<xhs-view data-skeleton-empty>hello</xhs-view>
<xhs-view data-skeleton-bgcolor="#f60">hello</xhs-view>