需要做一个展示用于呈现某条流程的执行过程，一个完成了才能进入下一个。

image.png

说实话，刚拿到设计图时很闷，这咋做（低声细语好恶心的东西），但是没办法呀！有困难就要去克服，本着一个专业程序员的修养（默默打开了百度），一番搜寻无果——属实搞心态。索性放下去搞别的了，不能把其他工作卡住呀。当其他工作OK后又拿起了这个需求左看又看，突然脑子中浮现了新的想法。

实现思路：

1.首先将拿到的数据进行格式化操作，将原本的一维数组，改为二维数组，再将偶数行数据逆排列
2.html 部分将一维数组作为行排列，将二维数组进行列排列，在通过flex布局控制奇偶行样式，实现，至于节点间连线，让UI切了张图放入节点连接处。

代码：

<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

基本代码块实现了。接下来根据实际优化一下占时。按屏幕尺寸计算一下行块数量即可。

实现内容

image.png