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

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

解釋： 頁面狀態(tài)組件，可用于全屏和半屏。用于展示頁面加載，頁面異常-有操作、頁面異常-無操作三種頁面狀態(tài)。設(shè)計(jì)文檔詳見 空態(tài) 。

屬性說明

示例 

在開發(fā)者工具中打開

代碼示例

<view class="wrap {{theme}}">
    <view class="card-panel" s-for="item,index in pageList">
        <view class="mode-title">
            <view class="mode-title-line-left"></view>
            <view class="mode-title-text">{{item.titleBar}}</view>
            <view class="mode-title-line-right"></view>
        </view>
        <view class="smt-card-area">
            <smt-page-status
                class="area-content"
                loading="{{item.loading}}"
                theme="{{theme}}"
                icon="{{item.icon}}"
                data-index="{{index}}"
                bind:smtreloading="reloading"
                title="{{item.title}}"
                desc="{{item.desc}}"
                showBtn="{{item.showBtn}}"
                btnText="{{item.btnText}}">
            </smt-page-status>
        </view>
    </view>
    <view class="smt-card-config">
        <view class="item-scroll border-bottom">
            <text class="switch-text switch-text-before">沉浸式主題</text>
            <switch color="{{theme ==='dark' ? '#f5f5f5' : '#ddd'}}" class="init-switch" disabled="false" bind:change="changeTheme"></switch>
        </view>
    </view>
    <view class="smt-card-config">
        <view class="item-scroll" bindtap="navigateTo" hover-class="page-status-hover" hover-stay-time="240">
            <text class="switch-text switch-text-before">查看頁面模板</text>
            <image class="item-logo" src="https://b.bdstatic.com/miniapp/images/extensions/right_arrow.png" rel="external nofollow" ></image>
        </view>
    </view>
</view>

Page({
    data: {
        theme: '',
        pageList: [
            {
                titleBar: '頁面加載',
                loading: true
            },
            {
                titleBar: '頁面異常-有操作',
                loading: false,
                icon: 'wifi',
                title: '網(wǎng)絡(luò)不給力，請(qǐng)稍后重試',
                btnText: '重新加載',
                event: 'reloading'
            },
            {
                titleBar: '頁面異常-無操作',
                loading: false,
                title: '暫無內(nèi)容',
                showBtn: false,
                desc: '沒有相關(guān)內(nèi)容，先看看別的吧'
            }
        ]
    },
    navigateTo() {
        swan.navigateTo({url: '/extensions/component/smt-status-page/smt-status-page'});
    },
    changeTheme(e) {
        const checked = e.detail.checked;

        this.setData({
            theme: checked ? 'dark' : ''
        });

        swan.nextTick(() => {
            swan.setBackgroundColor({
                backgroundColor: checked ? '#3670c2' : '#f5f5f5'
            });
        });
    },
    reloading(e) {
        let index = e.currentTarget.dataset.index;

        this.setData(`pageList[${index}].loading`, true);

        setTimeout(() => {
            this.setData(`pageList[${index}].loading`, false);
        }, 3000);
    }
});

{
    "navigationBarTitleText": "頁面狀態(tài)",
    "navigationStyle": "default",
    "usingComponents": {
        "smt-page-status" : "@smt-ui/component/src/page-status"
    }
}

.wrap {
    padding-top: .2rem;
    background: #f5f5f5;
}

.wrap .smt-card-area {
    margin: 25.362rpx 0 72.464rpx;
    background: #fff;
}
.wrap .area-content {
    height: 635.87rpx;
}

.wrap .init-switch {
    vertical-align: middle;
    margin: 28.986rpx 0;    
}

.wrap .switch-text-before {
    margin-top: 38.043rpx;
    font-size: 28.986rpx;
    color: #333;
}

.wrap .smt-card-config {
    background: #fff;
    overflow: hidden;
}

.smt-card-config .item-scroll {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.wrap .item-logo {
    display: inline-block;
    width: 32.609rpx;
    height: 32.609rpx;
    margin: 34.005rpx 0;
}

.page-status-hover {
    opacity: .2;
}

.wrap.dark {
    background-color: #3670c2;
}

.wrap.dark .smt-card-config {
    background-color: #4985da;
}

.wrap.dark .switch-text-before {
    color: #fff;
    background: #4985da;
}

.wrap.dark .mode-title-line-left {
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
    opacity: .3;
}

.wrap.dark .mode-title-line-right {
    background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
    opacity: .3;
}

.wrap.dark .mode-title-text {
    color: #fff;
}

.wrap.dark .border-bottom:after {
    transform: scaleY(.5);
    background: #73a5eb;
}

.wrap.dark .theme {
    color: #fff;
    background-color: #4985da;
}

.wrap.dark .swan-switch-input:after {
    background: #38f;
}

Bug & Tip

• Tip：實(shí)際應(yīng)用中若 6 秒仍未加載成功，頁面由加載狀態(tài)變?yōu)榭諔B(tài)/異常狀態(tài)。所需圖標(biāo)可從 smart-ui 的 icon 中選擇與場(chǎng)景匹配的內(nèi)容并直接引用。
• Tip：若希望用戶嘗試再次加載或引導(dǎo)去相關(guān)場(chǎng)景，頁面除標(biāo)題（title）和描述文案（desc）請(qǐng)?zhí)峁┎僮靼粹o（showBtn）請(qǐng)注意文案表達(dá)簡(jiǎn)潔明了。