百度智能小程序 頁面狀態(tài)模板

page-status 頁面狀態(tài)模板

解釋: 頁面狀態(tài)模板，可通過配置 theme 主題選擇不同的頁面狀態(tài)：loadingStatus 加載中，noWifiStatus 無網(wǎng)絡(luò)，noContent 暫無內(nèi)容。

示例

使用方式

方式一 【 NPM 】

1. 在小程序根目錄執(zhí)行下方命令，下載頁面模板的 npm 包：

npm i @smt-ui-template/page-status

2. 將 /node_modules/@smt-ui-template/page-status 下的 @smt-ui-template-status 文件夾拷貝到當前小程序合適的目錄下 （如 pages ）:

   .
   ├── project.swan.json                   
   ├── app.json                            
   ├── app.js                              
   ├── pages
       └──  @smt-ui-template-status    // 模板文件
   

3. 在小程序根目錄的 app.json 中配置模板頁面的 path 路徑，查看效果，如：

   {
       "pages": [
           ...
           "pages/@smt-ui-template-status/index"
           ...
       ]
   }
   

4. 為了方便在開發(fā)者工具中查看模板頁的效果，可以設(shè)置模板頁為小程序預(yù)覽的首頁。該功能的說明請參考自定義編譯文檔。

    

方式二 【 開發(fā)者工具-頁面模板 】

1. 打開開發(fā)者工具，點擊 ”頁面模板“，在下方找到 ”頁面狀態(tài)模板“，選中該模板后點擊右下角 ”立即使用”，填寫相關(guān)信息點擊右下角 ”完成“ 按鈕。
2. 使用開發(fā)者工具的編輯器或者選擇自己熟悉的編輯器對模板進行二次開發(fā)。

   代碼示例

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

3. 可在 js 中配置不同的 theme 數(shù)據(jù)，展示不同的模板狀態(tài)：loadingStatus 加載中，noWifiStatus 無網(wǎng)絡(luò)，noContent 暫無內(nèi)容。

Bug & Tip

• Tip：模板中使用的是測試數(shù)據(jù)，你需要從接口中獲取真實的數(shù)據(jù)。
• Tip：模板中內(nèi)置了部分數(shù)據(jù)記錄，你可以定義自己需要記錄的數(shù)據(jù)。
• Tip: 頁面模板功能從開發(fā)者工具 v2.25.1-rc 版本開始支持