page-status 页面状态

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-status
                class="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）请注意文案表达简洁明了。