骨架屏 -凯发app官方网站

更新时间：2024-04-03 14:35:30

订阅更新

我的文档

设置

骨架屏是页面的一个空白版本，在逻辑层通信数据到渲染层呈现视图之前，通过一些灰色的区块大致勾勒出轮廓，待数据加载完成后，再替换成真实的内容。

使用限制

●

从

基础库

2.9.19 或更高版本、

客户端

10.5.26 或更高版本开始支持；若版本较低，骨架屏将不生效。

为页面开启骨架屏

在 app.json 中配置如下基础内容：

{

"loadingpages": {

"ignorepages": []

}

●

如果需要为所有的页面设置通用的骨架屏，可以在 app.json 的同目录下添加 app.loading.axml 和 app.loading.acss 文件。

●

存在全局的 app.loading.axml 后，所有页面都会加载骨架屏。如果需要排除特定的页面，请修改 app.json 中

loadingpages.ignorepages

字段的值，将需要排除的页面路径添加到数组中。

●

全局骨架屏是可选的，也可以仅为特定的页面开启骨架屏。仅需在需要开启骨架屏的页面的 .json 配置文件同目录下添加同名的 .loading.axml 和 .loading.acss 文件。

目录结构示例如下：

app

|----pages

| |----default

| | |----default.js

| | |----default.json

| | |----default.axml

| |----ignore

| | |----ignore.js

| | |----ignore.json

| | |----ignore.axml

| |----home

| |----home.js

| |----home.json

| |----home.axml

| |----home.acss

| |----home.loading.axml // 特定页面骨架屏视图（可选）

| |----home.loading.acss // 特定页面骨架屏样式（可选）

|----app.js

|----app.json // 定义开启骨架屏

|----app.loading.axml // 全局骨架屏视图（可选）

|----app.loading.acss // 全局骨架屏样式（可选）

假设 app.json 中配置如下：

在上述目录结构下，骨架屏生效规则是：

●

进入 pages/default/default 时，展示 app.loading.axml 的内容；

●

进入 pages/ignore/ignore 时，不使用骨架屏；

●

进入 pages/home/home 时，展示 home.loading.axml 的内容。

开发骨架屏

骨架屏通过 .loading.axml 和 .loading.acss 文件定义视图内容和样式。与开发普通页面的视图模板几乎相同。

注意事项

●

不支持 js 逻辑，但可以在 axml 中使用

sjs 语法

。

●

axml 中不支持使用自定义组件。

●

骨架屏样式和页面样式是各自独立加载的，页面样式将对骨架屏产生副作用，请避免骨架屏样式和页面样式发生冲突，也避免骨架屏依赖页面的样式。

●

渲染真实内容后，骨架屏的 acss 文件内样式将被移除，但 css 变量（见下述）将继续对真实内容生效。

●

调试骨架屏时，可以在页面的 onload 生命周期或者小程序全局 onlaunch 生命周期中断点，以此阻塞真实内容的渲染，从而预览骨架屏。

css 变量

有时候，骨架屏需要处理标题栏、右上角胶囊按钮等布局相关的问题。基础库在开启骨架屏后会向页面提供默认的 css 变量，开发者可以在骨架屏中直接使用。

示例

变量列表

css 变量	描述
--my-system-info-pixel-ratio	设备像素比
--my-system-info-window-width	可用窗口（值除去状态栏和标题栏后可以自定义内容的区域）宽度。单位：px
--my-system-info-window-height	可用窗口高度。单位：px
--my-system-info-screen-width	屏幕宽度。单位：px
--my-system-info-screen-height	屏幕高度。单位：px
--my-system-info-status-bar-height	状态栏高度。单位：px
--my-system-info-title-bar-height	标题栏高度。单位：px
--my-system-info-font-size-setting	用户设置字体大小。单位：px
--my-system-info-safe-area-width	竖屏正方向下的安全区域的宽度。单位：px
--my-system-info-safe-area-height	安全区域的高度。单位：px
--my-system-info-safe-area-left	安全区域左边界坐标。单位：px
--my-system-info-safe-area-right	安全区域右边界坐标。单位：px
--my-system-info-safe-area-top	安全区域上边界坐标。单位：px
--my-system-info-safe-area-bottom	安全区域下边界坐标。单位：px
--my-menu-button-width	右上角胶囊按钮宽度。单位：px
--my-menu-button-height	胶囊按钮高度。单位：px
--my-menu-button-left	胶囊按钮左边界坐标。单位：px
--my-menu-button-right	胶囊按钮右边界坐标。单位：px
--my-menu-button-top	胶囊按钮上边界坐标。单位：px
--my-menu-button-bottom	胶囊按钮下边界坐标。单位：px

全局和页面参数变量

存在

小程序的全局参数和页面参数

时，这些参数会且仅会自动转换为在骨架屏 axml 可使用的变量。如果发生全局参数和页面参数同名冲突，页面参数的优先级会更高。

例如，当打开页面的完整路径为

pages/home/home?foo=bar

时，就可以在 axml 中使用：

相关问题