page-status 页面状态组件

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

属性说明

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

示例

在开发者工具中预览效果

扫码体验

page-status 页面状态 - 图1

代码示例

  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. }