微信小程序-物流详情实现+接口数据处理（纵向时间轴）

初始效果：

思路：

效果图

wxml

<!-- 大容器 -->
<view class="r-wrap">
    <!-- 每一条数据 -->
    <view class="r-wrap-item">
        <!-- 左子项 -->
        <view class="r-item-left">
            <!-- 左子项上块 -->
            <view class="r-item-left-crd first"></view>
            <!-- 点 -->
            <view class="r-point-wrap">
                <view class="r-point-item"></view>
            </view>
            <!-- 左子项下块 -->
            <view class="r-item-left-crd"></view>
        </view>
        <!-- 右子项 -->
        <view class="r-item-right">
            <!-- 内容 -->
            <view class="r-item-right-content">
                您的订单由京东【长沙分拨中心】送往【娄底南苑营业部】
            </view>
            <!-- 时间 -->
            <view class="r-item-right-time">
                2019-11-20 22:05:48
            </view>
        </view>
    </view>

    <!-- 每一条数据 -->
    <view class="r-wrap-item">
            <!-- 左子项 -->
            <view class="r-item-left">
                <!-- 左子项上块 -->
                <view class="r-item-left-crd"></view>
                <!-- 点 -->
                <view class="r-point-wrap">
                    <view class="r-point-item"></view>
                </view>
                <!-- 左子项下块 -->
                <view class="r-item-left-crd"></view>
            </view>
            <!-- 右子项 -->
            <view class="r-item-right">
                <!-- 内容 -->
                <view class="r-item-right-content">
                    您的订单在京东【长沙分拨中心】分拣完成
                </view>
                <!-- 时间 -->
                <view class="r-item-right-time">
                    2019-11-20 19:23:44
                </view>
            </view>
        </view>

         <!-- 每一条数据 -->
    <view class="r-wrap-item">
            <!-- 左子项 -->
            <view class="r-item-left">
                <!-- 左子项上块 -->
                <view class="r-item-left-crd"></view>
                <!-- 点 -->
                <view class="r-point-wrap">
                    <view class="r-point-item"></view>
                </view>
                <!-- 左子项下块 -->
                <view class="r-item-left-crd"></view>
            </view>
            <!-- 右子项 -->
            <view class="r-item-right">
                <!-- 内容 -->
                <view class="r-item-right-content">
                    您的订单由京东【武汉亚一分拣中心】送往【长沙分拨中心】
                </view>
                <!-- 时间 -->
                <view class="r-item-right-time">
                    2019-11-20 11:33:28
                </view>
            </view>
        </view>

         <!-- 每一条数据 -->
    <view class="r-wrap-item">
            <!-- 左子项 -->
            <view class="r-item-left">
                <!-- 左子项上块 -->
                <view class="r-item-left-crd"></view>
                <!-- 点 -->
                <view class="r-point-wrap">
                    <view class="r-point-item"></view>
                </view>
                <!-- 左子项下块 -->
                <view class="r-item-left-crd last"></view>
            </view>
            <!-- 右子项 -->
            <view class="r-item-right">
                <!-- 内容 -->
                <view class="r-item-right-content">
                   您的订单在京东【武汉亚一分拣中心】分拣完成
                </view>
                <!-- 时间 -->
                <view class="r-item-right-time">
                    2019-11-20 11:28:15
                </view>
            </view>
        </view>
</view>

wxss

/* 每一行数据容器 */
.r-wrap-item{
    display: flex;
}
/* 左边容器 */
.r-item-left{
    display: flex;
    flex-direction: column;
    width:100rpx;
}
/* 左边容器子项 */
.r-item-left .r-item-left-crd{
    flex:1;
    border-right: 1rpx solid #D5D5D5;
}
/* 点容器 */
.r-item-left .r-point-wrap{
    position: relative;
}
/* 点容器子项 */
.r-item-left .r-point-wrap .r-point-item{
    position: absolute;
    top:-10rpx;
    left:90rpx;
    width: 20rpx;
    height: 20rpx;
    border-radius: 50%;
    background: #ccc;
}
/* 左子项不要边框块 */
.r-item-left .r-item-left-crd.first,.r-item-left-crd.last{
    flex:1;
    border: none;
}
/* 右容器 */
.r-item-right{
    flex:10;
    font-size: 30rpx;
    padding: 30rpx;
}
.r-item-right .r-item-right-time{
    font-size: 26rpx;
    color: #B4B4B4;
}

取接口数据且遍历

接口格式为

[{a:1,b:2},{…},{…}]

效果图