[开发测试]微信小程序实现物流信息（进度展示）

前言

电商类App物流信息大家再熟悉不过吧，那你知道怎么做一个电商同款的物流信息进度展示吗，下面用最简单易懂的代码来告诉你。

实现效果如下：

实现思路

其实可以把整体拆分成两大块，分别是最上方：物流详情，下方：物流信息；最上方实现起来比较简单，就不多赘述，主要跟大家说一下下面的实现思路，下面我又将它们分成了左边和右边两个大块，左边是进度的竖线展示，右边是物流文字信息展示，其中有两个点需要注意，首先是根据数组的长度判断了展示具体内容，若>0正常展示，反之则展示“暂无物流信息”字样，其次是线条也会根据判断条件展示不同的样式，这一点主要是为了兼容一条信息及多条信息不同的样式，剩下的就是样式的一些调整，代码中有详细的注释，大家可以在实现功能的同时根据注释调整为自己的需要的样子。

代码如下：

wxml文件

<view class="outerBox">
    <!-- 头部物流信息 -->
    <view class="navBox">
        <view class="navLeftBox">
            <view>
                <image src="https://b.bdstatic.com/searchbox/icms/searchbox/img/zhongtonglogo.png"></image>
            </view>
            <view>中通快递</view>
            <view>78465464135654565</view>
        </view>
        <view class="navRightBox">
            <text>复制</text>
            <text>|</text>
            <text>电话</text>
        </view>
    </view>
    <!-- 主体内容 -->
    <view class="contantBox">
        <!-- 通过数组长度判断显示内容 >0显示物流信息-->
        <view wx:if="{{dataList.length > 0}}">
            <view class="itemBox" wx:for="{{dataList}}" wx:key="index">
                <!-- 左边线条 -->
                <view class="itemLeftBox">
                    <view class="lineBox">
                        <view class="topLineBox {{index == 0 ? '' : 'longLineBox'}}"></view>
                        <view class="bomLineBox {{index + 1 == dataList.length ? '' : 'longLineBox'}}"></view>
                    </view>
                    <image class="newestIconBox" src="https://s1.ax1x.com/2022/03/29/qySZi4.png" wx:if="{{index == 0}}"></image>
                    <view class="dotBox" wx:else="{{index > 0}}"></view>
                </view>
                <!-- 右边内容 -->
                <view class="rightBigBox {{index == 0 ? '' : 'oldTxtBox'}} {{index + 1 == dataList.length ? '' : 'borderBomBox'}}">
                    <view>{{item.content}}</view>
                    <view class="timeBox">{{item.time}}</view>
                </view>
            </view>
        </view>
        <!-- 通过数组长度判断显示内容 除了大于0之外显示暂无物流信息-->
        <view class="notBox" wx:else>暂无物流信息</view>
    </view>
</view>

js文件

Page({
  data: {
    dataList: [
      {
        content: '已签收，签收人凭取货码签收。',
        time: '2022-03-27 21:01'
      },
      {
        content: '北京昌平二部中通张三[18821444747]正在派件（95720为中通快递员外呼专属电话，请放心接听）',
        time: '2022-03-27 17:51'
      },
      {
        content: '快件已到达北京昌平二部中通',
        time: '2022-03-27 07:11'
      },
      {
        content: '快件离开潮汕中心已发往北京昌平二部中通',
        time: '2022-03-26 17:45'
      },
      {
        content: '快件发往潮汕中心',
        time: '2022-03-26 07:45'
      },
      {
        content: '包裹已揽收',
        time: '2022-03-25 16:15'
      },
      {
        content: '包裹正在等待揽收',
        time: '2022-03-25 09:16'
      },
      {
        content: '商品已下单',
        time: '2022-03-24 18:01'
      }
    ]
  },
})

wxss文件

.outerBox {
    /* 最外层的盒子 */
    width: 100%;
    font-size: 24rpx;
}

.navBox {
    /* 头部样式 */
    padding: 18rpx;
    border-bottom: 2rpx solid rgb(236, 236, 236);
}

.navBox,
.navLeftBox {
      /* 头部内容样式 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
}

.navLeftBox view {
     /* 头部左边的样式 */
    margin-left: 10rpx;
}

.navRightBox text {
    /* 头部右边的样式 */
    margin-left: 10rpx;
}

.navRightBox text:nth-child(2) {
    /* 头部竖线文字颜色 */
    color: rgb(226, 225, 225);
}

.navBox image {
    /* 图片样式 */
    width: 46rpx;
    height: 46rpx;
    border-radius: 50%;
}

.contantBox {
    /* 物流信息整体样式 */
    padding: 0 18rpx;
}

.itemBox {
    width: 100%;
    display: flex;
}

.itemLeftBox {
    /* 左边一整条竖线外层盒子的样式 */
    position: relative;
    width: 62rpx;
}

.lineBox {
    /* 左边一整条竖线的样式 */
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-left: 28rpx;
}

.longLineBox {
    /* 线的样式 */
    background-color: rgb(215, 215, 215);
}

.topLineBox {
    /* 线的样式 */
    width: 1px;
    height: 50rpx;
}

.bomLineBox {
    /* 线的样式 */
    flex: 1;
    width: 1px;
}
.newestIconBox {
    /* 最新物流信息icon样式 */
    position: absolute;
    top: 36rpx;
    left: 9rpx;
    width: 40rpx;
    height: 40rpx;
}

.dotBox {
    /* 圆点样式 */
    position: absolute;
    top: 44rpx;
    left: 20rpx;
    width: 18rpx;
    height: 18rpx;
    border-radius: 50%;
    background-color: rgb(201, 201, 201);
}

.rightBigBox {
    /* 右边物流信息每一个节点的样式 */
    flex: 1;
    padding: 38rpx 0;
}

.borderBomBox {
    /* 物流信息下划线 */
    border-bottom: 1px solid rgb(243, 241, 241);
}

.oldTxtBox {
    /* 之前物流信息文字样式 */
    color: rgb(159,159,159);
}


.timeBox {
    /* 时间样式 */
    margin-top: 4rpx;
    font-size: 20rpx;
}


.notBox {
    /* 暂无物流信息样式 */
    padding: 20rpx 0;
    text-align: center;
    color: rgb(159,159,159);
}