page-status 页面状态模板

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

# 示例

扫码体验
重新加载
请使用百度APP扫码

# 使用方法

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

# 代码示例

    <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>
    
    1. 可在 js 中配置不同的 theme 数据,展示不同的模板状态:loadingStatus 加载中,noWifiStatus 无网络,noContent 暂无内容。

    # Bug & Tip

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