微信小程序实现物流信息（进度展示）

Posted 2022-04-01 水星记_

前言

电商类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);