页面状态模板

解释: 页面状态模板，可通过配置theme主题选择不同的页面状态：loadingStatus加载中，noWifiStatus无网络，noContent暂无内容。

示例

扫码体验

页面状态模板 - 图1

使用方法

  • 在小程序根目录下执行如下命令行，引入页面模板。
  1. npm i @smt-ui-template/page-status
  • 进入page-status文件夹，安装所有模板依赖
  1. npm i

代码示例

  1. <view class="card-panel">
  2.     <smt-page-status
  3.         s-if="{{theme == 'loadingStatus'}}"
  4.         class="area-content"
  5.         loading="{{loadingStatus.loading}}">
  6.     </smt-page-status>
  7.     <smt-page-status
  8.         s-if="{{theme == 'noWifiStatus'}}"
  9.         class="area-content"
  10.         loading="{{noWifiStatus.loading}}"
  11.         icon="{{noWifiStatus.icon}}"
  12.         title="{{noWifiStatus.title}}"
  13.         desc="{{noWifiStatus.desc}}"
  14.         bind:smtreloading="reloading"
  15.         data-theme="{{theme}}">
  16.     </smt-page-status>
  17.     <smt-page-status
  18.         s-if="{{theme == 'noContent'}}"
  19.         class="area-content"
  20.         loading="{{noContent.loading}}"
  21.         title="{{noContent.title}}"
  22.         desc="{{noContent.desc}}"
  23.         showBtn="{{noContent.showBtn}}">
  24.     </smt-page-status>
  25. </view>
  • 可在js中配置不同的theme数据，展示不同的模板状态：loadingStatus加载中，noWifiStatus无网络，noContent暂无内容。

Bug & Tip

  • Tip：模板中使用的是测试数据，你需要从接口中获取真实的数据。
  • Tip：模板中内置了部分数据记录，你可以定义自己需要记录的数据。
  • Tip: 页面模板功能从开发者工具 v2.25.1-rc 版本开始支持