在 .json skeleton 字段下追加 options 字段,可用于配置骨架屏一些基本选项:
{ "navigationBarTitleText": "小程序示例", "usingComponents": {}, // 配置骨架屏字段 "skeleton": { // 指定骨架屏路径 (注:平台默认加载 [name].skeleton.css 文件) "path": "./component.skeleton.xhsml" } }
参数名称 | 必填 | 默认值 | 说明 |
---|---|---|---|
animation | 否 | shine | 动画模式,支持 shine、shine2 两种骨架动画 |
minGrayBlockWidth | 否 | 0 | 最小处理灰色块的宽度 |
minGrayPseudoWidth | 否 | 0 | 最小处理伪类宽 |
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>