百度智能小程序 步驟條

steps 步驟條

解釋： 步驟條組件，可配置步驟條內(nèi)容，步驟條狀態(tài)，步驟條上限為8步。適用于信息輸入，并可放置在頁面的任何位置。

屬性說明

示例 

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

代碼示例

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">默認(rèn)樣式</view>
        <view class="border-bottom">
            <smt-steps
                active="{{stepsActive}}"
                line-style="solid"
                steps="{{steps}}"
                active-color="#2772fb"
                step-main-class="step-main"
            >
            </smt-steps>
        </view>
        <button
            bindtap="addStep"
            class="step-btn-cls"
            hover-stop-propagation="true"
            type="primary"
        >
            點(diǎn)擊按鈕添加步驟
        </button>
    </view>
    <view class="card-area">
        <view class="top-description border-bottom">執(zhí)行展示</view>
        <view class="border-bottom">
            <smt-steps
                active="{{fourStepsActive}}"
                line-style="solid"
                steps="{{fourSteps}}"
                active-color="#2772fb"
                step-main-class="step-main"
            >
            </smt-steps>
        </view>
        <button
            bindtap="changeActive"
            class="step-btn-cls"
            hover-stop-propagation="true"
            type="primary"
        >
            點(diǎn)擊按鈕執(zhí)行步驟
        </button>
    </view>
</view>

Page({
    data: {
        stepsActive: 2,
        steps: [
            {
                text: '第1步'
            },
            {
                text: '第2步'
            }
        ],
        fourStepsActive: 2,
        fourSteps: [
            {
                text: '第1步'
            },
            {
                text: '第2步'
            },
            {
                text: '第3步'
            },
            {
                text: '第4步'
            }
        ]
    },

    /**
     * 添加步驟條進(jìn)度
     */
    addStep() {
        const {stepsActive, steps} = this.data;
        const len = steps.length;

        if (len < 8) {
            this.setData({
                steps: [
                    ...steps,
                    {
                        text: `第${len + 1}步`
                    }
                ],
                stepsActive: stepsActive + 1
            });
        }
        else {
            this.showToast('步驟添加已到上限');
        }
    },

    /**
     * 展示提示
     *
     * @param {string} title 提示內(nèi)容
     */
    showToast(title) {
        swan.showToast({
            title,
            icon: 'none'
        });
    },

    /**
     * 執(zhí)行步驟
     */
    changeActive() {
        const {fourStepsActive, fourSteps} = this.data;
        if (fourStepsActive < fourSteps.length) {
            this.setData({
                fourStepsActive: fourStepsActive + 1
            });
        }
        else {
            this.showToast('步驟已執(zhí)行完成');
        }
    }
});

.wrap {
    background-color: #f5f5f5;
    height: 100vh;
}

.step-main {
    display: flex;
    justify-content: center;
}

.step-main view {
    margin-left: 0 !important;
}

.step-btn-cls {
    background-color: #2772fb !important;
    color: #fff;
}

{
    "navigationBarTitleText": "步驟條",
    "navigationStyle": "default",
    "usingComponents": {
        "smt-steps": "@smt-ui/component/src/steps"
    }
}