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

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

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

示例

使用方式

方式一 【 NPM 】

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

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

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

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

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

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

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

    

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

1. 打開(kāi)開(kāi)發(fā)者工具，點(diǎn)擊 ”頁(yè)面模板“，在下方找到 ”頁(yè)面狀態(tài)模板“，選中該模板后點(diǎn)擊右下角 ”立即使用”，填寫相關(guān)信息點(diǎn)擊右下角 ”完成“ 按鈕。
2. 使用開(kāi)發(fā)者工具的編輯器或者選擇自己熟悉的編輯器對(duì)模板進(jìn)行二次開(kāi)發(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ú)網(wǎng)絡(luò)，noContent 暫無(wú)內(nèi)容。

Bug & Tip

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