spin 加载

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

# 属性说明

属性名 类型 必填 默认值 说明
status Number 加载状态配置
theme String 主题配置,默认浅色;深色主题请指定dark
textConfig Array ['点击加载更多', '正在加载...', '已经到底啦', '加载失败 点击重新加载'] 加载状态对应的文案
secureBottom Boolean true 默认兼容iPhoneX 及以上型号底部安全区,非全屏可关闭

# 示例

在开发者工具中预览效果

# 扫码体验

# 代码示例

    <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);
    }