• page-status 页面状态模板
  • 示例
    • 代码示例
  • Bug & Tip

page-status 页面状态模板

从开发者工具 v2.25.1-rc 版本开始支持。

解释：页面状态模板。可在 JS 中配置不同的 theme 数据，展示不同的页面状态：loadingStatus 加载中，noWifiStatus 无网络，noContent 暂无内容。

示例

扫码体验

代码示例

请使用百度APP扫码

代码示例

• SWAN

 
 
 

  
  
  
<view class="card-panel">
  
  
  
 <smt-page-status
  
  
  
 s-if="{{theme == 'loadingStatus'}}"
  
  
  
 class="area-content"
  
  
  
 loading="{{loadingStatus.loading}}">
  
  
  
 </smt-page-status>
  
  
  
 <smt-page-status
  
  
  
 s-if="{{theme == 'noWifiStatus'}}"
  
  
  
 class="area-content"
  
  
  
 loading="{{noWifiStatus.loading}}"
  
  
  
 icon="{{noWifiStatus.icon}}"
  
  
  
 title="{{noWifiStatus.title}}"
  
  
  
 desc="{{noWifiStatus.desc}}"
  
  
  
 bind:smtreloading="reloading"
  
  
  
 data-theme="{{theme}}">
  
  
  
 </smt-page-status>
  
  
  
 <smt-page-status
  
  
  
 s-if="{{theme == 'noContent'}}"
  
  
  
 class="area-content"
  
  
  
 loading="{{noContent.loading}}"
  
  
  
 title="{{noContent.title}}"
  
  
  
 desc="{{noContent.desc}}"
  
  
  
 showBtn="{{noContent.showBtn}}">
  
  
  
 </smt-page-status>
  
  
  
</view>
 
 
 

Bug & Tip

• Tip：模板中使用的是测试数据，你需要从接口中获取真实的数据。
• Tip：模板中内置了部分数据记录，你可以定义自己需要记录的数据。