- page-status 页面状态
- 属性说明
- 示例
- 代码示例
- Bug & Tip
page-status 页面状态
解释：页面状态组件，可用于全屏和半屏。用于展示页面加载，页面异常 – 有操作、页面异常 – 无操作三种页面状态。设计文档详见空态。
属性说明
| 属性名 | 类型 | 必填 | 默认值 | 说明 |
|---|---|---|---|---|
|
theme |
String |
否 |
主题配置，默认浅色；沉浸式主题请指定 dark |
|
|
loading |
Boolean |
否 |
false |
页面状态配置，默认不展示加载状态页面 |
|
icon |
String |
否 |
content |
空态/缺省页面下的图标名称 |
|
loadingTitle |
String |
否 |
“正在加载…” |
加载页面下的标题文案 |
|
title |
String |
否 |
“单行标题” |
空态/缺省页面下的标题文案 |
|
desc |
String |
否 |
空态/异常页面下的描述文案，最多展示 40 个字，超出内容会被截断 |
|
|
showBtn |
Boolean |
否 |
true |
是否展示空态/缺省页面下的操作按钮，默认展示 |
|
btnText |
String |
否 |
“重新加载” |
空态/缺省页面下，操作按钮的描述文案，最多显示 8 个汉字，超出内容会被截断 |
示例
跳转编辑工具
在开发者工具中打开
在 WEB IDE 中打开
扫码体验
代码示例
请使用百度APP扫码
代码示例
- SWAN
- JS
- CSS
- JSON
<view class="wrap {{theme}}"><view class="card-panel" s-for="item,index in pageList"><view class="mode-title"><view class="mode-title-line-left"></view><view class="mode-title-text">{{item.titleBar}}</view><view class="mode-title-line-right"></view></view><view class="smt-card-area"><smt-page-statusclass="area-content"loading="{{item.loading}}"theme="{{theme}}"icon="{{item.icon}}"data-index="{{index}}"bind:smtreloading="reloading"title="{{item.title}}"desc="{{item.desc}}"showBtn="{{item.showBtn}}"btnText="{{item.btnText}}"></smt-page-status></view></view><view class="smt-card-config"><view class="item-scroll border-bottom"><text class="switch-text switch-text-before">沉浸式主题</text><switch color="{{theme ==='dark' ? '#f5f5f5' : '#ddd'}}" class="init-switch" disabled="false" bind:change="changeTheme"></switch></view></view><view class="smt-card-config"><view class="item-scroll" bindtap="navigateTo" hover-class="page-status-hover" hover-stay-time="240"><text class="switch-text switch-text-before">查看页面模板</text><image class="item-logo" src="https://b.bdstatic.com/miniapp/images/extensions/right_arrow.png"></image></view></view></view>
Bug & Tip
- Tip：实际应用中若 6 秒仍未加载成功，页面由加载状态变为空态/异常状态。所需图标可从 smart-ui 的 icon 中选择与场景匹配的内容并直接引用。
- Tip：若希望用户尝试再次加载或引导去相关场景，页面除标题（title）和描述文案（desc）请提供操作按钮（showBtn）请注意文案表达简洁明了。
