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

2020-09-03 16:21 更新

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 包:
  2. npm i @smt-ui-template/page-status
    
  3. 將 /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    // 模板文件
    
  4. 在小程序根目錄的 app.json 中配置模板頁(yè)面的 path 路徑,查看效果,如:
    {
        "pages": [
            ...
            "pages/@smt-ui-template-status/index"
            ...
        ]
    }
    
  5. 為了方便在開(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)始支持


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)