手写步骤条

<template>
    <scroll-view scroll-x="true" :scroll-left="scrollLeft" class="progressBar" :scroll-into-view="scrollIntoView">
        <view v-for="(item,index) in newStepArr" :id="`progress-${item.id}`"
            :class="`progressBar-item ${item.isCheck?'progressBar-item-active':''}`" :key="index">
            <view class="progressBar-item-border" v-if="!item.isHead"></view>
            <view class="progressBar-item-Box">
                <view class="progressBar-item-circle"></view>
                <text class="progressBar-item-text">{{item.text}}</text>
            </view>
        </view>
    </scroll-view>
</template>

<script>
    export default {
        props: {
            currentStep: {
                type: Number,
                default: 0
            }
        },
        data() {
            return {
                scrollLeft: 0,
                stepArr: [
                    // 步骤数据
                    {
                        id: "phoneCode",
                        text: "手机验证码",
                        isHead: true, // 是否是头部元素
                        isCheck: false // 是否选中
                    },
                    {
                        id: "warning",
                        text: "阅读风险提示",
                        isHead: false, // 是否是头部元素
                        isCheck: false // 是否选中
                    },
                    {
                        id: "accountInfo",
                        text: "填写开户信息",
                        isHead: false, // 是否是头部元素
                        isCheck: false // 是否选中
                    },
                    {
                        id: "signAgreement",
                        text: "签署入市协议",
                        isHead: false, // 是否是头部元素
                        isCheck: false // 是否选中
                    },
                    {
                        id: "success",
                        text: "开户完成",
                        isHead: false, // 是否是头部元素
                        isCheck: false // 是否选中
                    }
                ],
                scrollIntoView: "" // 设置滚动到那个元素处
            }
        },
        computed: {
            newStepArr() {
                let arr = [];
                this.stepArr.map((item, index) => {
                    if (index <= this.currentStep) item.isCheck = true;
                    
                    arr.push(item);
                });
                return arr;
            }
        },
        mounted() {
            this.scrollIntoView = `progress-${this.stepArr[this.currentStep].id}`;
        }
    };
</script>

<style lang="scss" scoped>
    ::v-deep ::-webkit-scrollbar {
        display: none;
        width: 0 !important;
        height: 0 !important;
        -webkit-appearance: none;
        background: transparent;
    }
    ::v-deep .uni-scroll-view-content {
        display: flex;
        width: 190%;
    }

    .progressBar {
        padding: 40rpx;
        background-color: #fff;
        width: calc(100% - 80rpx);

        &-item {
            display: flex;
            align-items: center;

            &-text {
                font-size: 28rpx;
                color: #ababab;
            }

            &-Box {
                display: flex;
                align-items: center;
            }

            &-circle {
                margin-right: 12rpx;
                width: 24rpx;
                height: 24rpx;
                border: 4rpx solid #d9d9d9;
                border-radius: 100%;
            }

            &-border {
                margin-left: 20rpx;
                margin-right: 20rpx;
                width: 40rpx;
                height: 6rpx;
                background-color: #d9d9d9;
                border-radius: 8rpx;
            }

            &-active {
                &>.progressBar-item-Box>.progressBar-item-circle {
                    border-color: #009E7F;
                }

                &>.progressBar-item-Box>.progressBar-item-text {
                    color: #009E7F;
                }

                &>.progressBar-item-border {
                    background-color: #009E7F;
                }
            }
        }
    }
</style>

flex 布局order属性可以改变样式的布局order：-1换位置

防抖

• 解释：在短时间内触发一件事，每次都用上一次的时间替代，也就是只执行最后一次

• 节流

• 解释：短时间内快速触发一件事，当一个事件处理函数开始执行的时候，不允许重复执行（瀑布流）