百度智能小程序 加载

spin 加载

解释： 加载组件，可用于全屏和半屏。用于展示加载状态，点击加载、正在加载、加载完成、重新加载四种状态。

属性说明

示例 

在开发者工具中打开

代码示例

<view class="wrap {{theme}}">
    <view class="container {{theme}}">
        <view class="card-panel" s-for="item,index in panelList">
            <view class="mode-title">
                <view class="mode-title-line-left"></view>
                <view class="mode-title-text">{{item.title}}</view>
                <view class="mode-title-line-right"></view>
            </view>
            <scroll-view scroll-y bind:scrolltolower="lower" class="smt-card-area">
                <view class="list {{theme}}">
                    <view
                        s-if="index === 0"
                        class="{{'list-item ' + (val === 1 ? 'first' : '')}}"
                        s-for="val in actionList"
                        style="{{theme === 'dark' ? 'border-bottom: solid 1px #6d9ee1;' : 'border-bottom: solid 1px #e0e0e0;'}}"
                        key="{{val}}"
                    >
                        <view class="left">
                            <view class="row"></view>
                            <view class="row"></view>
                            <view class="row"></view>
                        </view>
                        <view class="right"></view>
                    </view>
                    <view
                        s-else
                        class="{{'list-item ' + (val === 1 ? 'first' : '')}}"
                        s-for="val in list"
                        style="{{theme === 'dark' ? 'border-bottom: solid 1px #6d9ee1;' : 'border-bottom: solid 1px #e0e0e0;'}}"
                        key="{{val}}"
                    >
                        <view class="left">
                            <view class="row"></view>
                            <view class="row"></view>
                            <view class="row"></view>
                        </view>
                        <view class="right"></view>
                    </view>
                </view>
                <smt-spin secure-bottom="{{false}}" data-index="{{index}}" bindtap="spinHandle" status="{{item.status}}" theme="{{theme}}"></smt-spin>
            </scroll-view>
        </view>
        <view class="card-area theme">
            <view class="left">
                <view class="line-01">沉浸式主题</view>
            </view>
            <switch color="{{theme === 'dark'? '#f5f5f5' : '#dddddd'}}" class="init-switch" disabled="false" bind:change="switchHandle"></switch>
        </view>
    </view>
</view>

{
    "navigationBarTitleText": "加载",
    "navigationStyle": "default",
    "usingComponents": {
        "smt-spin": "@smt-ui/component/src/spin"
    }
}

Page({
    data: {
        list: [1, 2, 3],
        actionList: [1, 2, 3],
        theme: '',
        panelList: [
            {
                title: '手动上滑加载',
                status: 1
            },
            {
                title: '点击加载',
                status: 0
            },
            {
                title: '重新加载',
                status: 3
            }
        ]
    },

    /**
     * 沉浸式主题切换按钮
     *
     * @param {Object} param switch 按钮默认返回参数
     * @param {Object} param.detail switch 状态对象
     */
    switchHandle({detail}) {
        const checked = detail.checked;

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

        swan.nextTick(() => {
            swan.setBackgroundColor({
                backgroundColor: checked ? '#3670c2' : '#f5f5f5'
            });
        });
    },

    /**
     * 加载组件点击事件
     *
     * @param {*} e event
     */
    spinHandle(e) {
        let index = e.currentTarget.dataset.index;
        let panelList = this.data.panelList;
        if (panelList[index].status !== 1) {
            panelList[index].status = 1;

            this.setData({
                panelList
            }, () => {
                setTimeout(() => {
                    panelList[index].status = (index === 1 ? 0 : 3);

                    this.setData({
                        panelList
                    });
                }, 3000);
            });
        }
    },

    // 示例面板触底事件
    lower() {
        setTimeout(() => {
            this.setData({
                actionList: [
                    ...this.data.actionList,
                    ...this.data.list
                ]
            });
        }, 2000);
    }
});

* {
    margin: 1;
    padding: 0;
    box-sizing: border-box;
}

.wrap {
    font-size: .16rem;
    padding-bottom: .5rem;
}

.mode-title {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .16rem;
    color: #000;
    font-family: PingFangSC-Medium;
}

.mode-title-text {
    margin: 0 .12rem;
}

.mode-title-line-left {
    border-radius: 3px;
    height: 1px;
    width: .23rem;
    background-image: linear-gradient(90deg, #f5f5f5 0%, #d5d5d5 100%);
}

.mode-title-line-right {
    border-radius: 3px;
    height: 1px;
    width: .23rem;
    background-image: linear-gradient(-90deg, #f5f5f5 0%, #d5d5d5 100%);
}

.theme-control{
    width: 100%;
}

.wrap {
    background-color: #f5f5f5;
    transition: background-color 200ms linear;
}

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

.container {
    padding-top: .2rem;
}

.container.dark .mode-title-text {
    color: #fff;
    transition: color 200ms linear;
}

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

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

.container.dark .card-area.theme {
    color: #fff;
    background-color: #4985da;
}

.container.dark .smt-card-area {
    background-color: #4985da;
}

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

.smt-card-area {
    margin-top: 25.36rpx;
    background-color: #fff;
}

.card-panel:first-child .smt-card-area {
    height: 635.87rpx;
    overflow: scroll;
}

.card-panel {
    width: 100%;
    margin-top: 72.46rpx;
}

.card-panel:first-child {
    margin-top: 0;
}

.card-area.theme {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 28.382rpx 30.797rpx;
    margin: 90.58rpx 0 0;
    border: none;
    border-radius: 0;
    transition: background-color 200ms linear;
    background: #fff;
}
.list {
    transition: background-color 200ms linear;
    padding: 0 .17rem;
}

.list-item {
    display: flex;
    justify-content: space-between;
    height: 211.96rpx;
    box-sizing: border-box;
    flex: none;
    padding: .17rem 0;
    color: #fff;
}

.list-item .left {
    display: flex;
    flex: auto;
    flex-flow: column nowrap;
}

.list-item .left .row {
    width: 100%;
    height: .19rem;
    background: #e0e0e0;
    transition: background-color 200ms linear;
    margin-bottom: .06rem;
}

.list-item .left .row.end {
    height: .12rem;
    margin-top: .27rem;
    margin-bottom: 0;
    width: 1.15rem;
}

.list-item .right {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ccc;
    width: 1.24rem;
    height: .65rem;
    margin-left: .17rem;
    border-radius: .03rem;
    background: #e0e0e0;
    transition: background-color 200ms linear;
}

.list.dark {
    background-color: transparent;
}

.list.dark .list-item .left .row,
.list.dark .list-item .right {
    background-color: rgba(255, 255, 255, .2);
}

设计指南

自定义文案（textConfig）时，文案内容应合理友好，且不超过 18 个中文字符。以下为建议文案可供参考：