需要做一個(gè)展示用于呈現(xiàn)某條流程的執(zhí)行過程，一個(gè)完成了才能進(jìn)入下一個(gè)。

image.png

說實(shí)話，剛拿到設(shè)計(jì)圖時(shí)很悶，這咋做（低聲細(xì)語好惡心的東西），但是沒辦法呀！有困難就要去克服，本著一個(gè)專業(yè)程序員的修養(yǎng)（默默打開了百度），一番搜尋無果——屬實(shí)搞心態(tài)。索性放下去搞別的了，不能把其他工作卡住呀。當(dāng)其他工作OK后又拿起了這個(gè)需求左看又看，突然腦子中浮現(xiàn)了新的想法。

實(shí)現(xiàn)思路：

1.首先將拿到的數(shù)據(jù)進(jìn)行格式化操作，將原本的一維數(shù)組，改為二維數(shù)組，再將偶數(shù)行數(shù)據(jù)逆排列
2.html 部分將一維數(shù)組作為行排列，將二維數(shù)組進(jìn)行列排列，在通過flex布局控制奇偶行樣式，實(shí)現(xiàn)，至于節(jié)點(diǎn)間連線，讓UI切了張圖放入節(jié)點(diǎn)連接處。

代碼：

<view class="content">
            
            <template v-for="(item, index) in (50 / 5)" >
                <view class="arrow" v-if="index != 0">
                    ↓
                </view>
                <view class="row" :class="{'reverse' : index % 2 !== 0}" :key="item">
                    <view class="item" v-for="(i, is) in 5">
                        <span v-if="index % 2 !== 0 && is!= 4">←</span>
                        {{index*5+is}}
                        <span v-if="index % 2 === 0 && is!= 4">→</span>
                    </view>
                </view>
            </template>
        </view>

css

.content{
            padding-top: 140rpx;
            .arrow-reverse {
                display: flex;
                flex-direction: row-reverse;
                margin-right: 80rpx;
            }
            .arrow-bottom {
                margin-left: 80rpx;
                width: 30rpx;
                height: 60rpx;
            }
            .row {
                display: flex;
                justify-content: space-between;
                height: 300rpx;
                .row-item {
                    flex: .3;
                    display: flex;
                    align-items: center;
                    position: relative;
                    .arrow {
                        padding-top: 50rpx;
                        position: absolute;
                        width: 60rpx;
                        top: -35rpx;
                        bottom: 0;
                        margin: auto;
                    }
                    .arrow-left {
                        left: -45rpx;
                        margin: auto 0;
                    }
                    .arrow-right {
                        right: -45rpx;
                        margin: auto 0;
                    }
                }
            }
            .reverse {
                flex-direction: row-reverse;
            }
        }

效果

image.png

基本代碼塊實(shí)現(xiàn)了。接下來根據(jù)實(shí)際優(yōu)化一下占時(shí)。按屏幕尺寸計(jì)算一下行塊數(shù)量即可。

實(shí)現(xiàn)內(nèi)容

image.png