page-status 页面状态

解释: 页面状态组件,可用于全屏和半屏。用于展示页面加载,页面异常-有操作、页面异常-无操作三种页面状态。设计文档详见 空态

# 属性说明

属性名 类型 必填 默认值 说明
theme String 主题配置,默认浅色;沉浸式主题请指定 dark
loading Boolean false 页面状态配置,默认不展示加载状态页面
icon String content 空态/缺省页面下的图标名称
loadingTitle String 正在加载... 加载页面下的标题文案
title String 单行标题 空态/缺省页面下的标题文案
desc String 空态/异常页面下的描述文案
showBtn Boolean true 是否展示空态/缺省页面下的操作按钮,默认展示
btnText String 重新加载 空态/缺省页面下,操作按钮的描述文案,建议最多显示 4 个汉字,超出内容截断

# 示例

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

# 代码示例

    <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"></image>
            </view>
        </view>
    </view>
    
    Page({
        data: {
            theme: '',
            pageList: [
                {
                    titleBar: '页面加载',
                    loading: true
                },
                {
                    titleBar: '页面异常-有操作',
                    loading: false,
                    icon: 'wifi',
                    title: '网络不给力,请稍后重试',
                    btnText: '重新加载',
                    event: 'reloading'
                },
                {
                    titleBar: '页面异常-无操作',
                    loading: false,
                    title: '暂无内容',
                    showBtn: false,
                    desc: '没有相关内容,先看看别的吧'
                }
            ]
        },
        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": "页面状态",
        "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:实际应用中若 6 秒仍未加载成功,页面由加载状态变为空态/异常状态。所需图标可从 smart-ui 的 icon 中选择与场景匹配的内容并直接引用。
    • Tip:若希望用户尝试再次加载或引导去相关场景,页面除标题(title)和描述文案(desc)请提供操作按钮(showBtn)请注意文案表达简洁明了。