title: page-status 页面状态组件 header: develop nav: extended sidebar: smt-page-status

webUrl: https://qft12m.smartapps.cn/extensions/component/smt-page-status/smt-page-status

解释： 页面状态组件，可用于全屏和半屏。用于展示页面加载，页面异常-有操作、页面异常-无操作三种页面状态。

属性说明

属性名 类型 必填 默认值 说明
theme String 否 主题配置，默认浅色；沉浸式主题请指定dark
loading Boolean 否 false 页面状态配置，默认不展示加载状态页面
icon String 否 content 空态/缺省页面下的图标名称
loadingTitle String 否 正在加载… 加载页面下的标题文案
title String 否 单行标题 空态/缺省页面下的标题文案
desc String 否 空态/缺省页面下的描述文案
showBtn Boolean 否 true 是否展示空态/缺省页面下的操作按钮，默认展示
btnText String 否 重新加载 空态/缺省页面下，操作按钮的描述文案,建议最多显示4个汉字，超出内容截断

示例

在开发者工具中预览效果

扫码体验

webUrl: https://qft12m.smartapps.cn/extensions/component/smt-page-status/smt-page-status - 图1

代码示例

:::codeTab

  1. <smt-page-status 
  2.     class="content"
  3.     loading="{{loading}}"
  4.     title="网络不给力，请稍后再试" >
  5. </smt-page-status>
  1. Page({
  2.     data: {
  3.         loading: false
  4.     },
  5.     reloading() {
  6.         this.setData({loading: true});
  7.         setTimeout(() => {
  8.             this.setData(
  9.                 {loading: false},
  10.             );
  11.         }, 3000);
  12.     }
  13. });
  1. .content {
  2.     width: 100%;
  3.     height: 100vh;
  4. }

:::