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

前言

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

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

微信小程序编写物流信息进度样式
做电商类型的小程序一定会碰到编写物流信息的时候,一般页面如下图难点在于只有一条信息时候的页面样式以及多条信息最后一条信息的页面样式之前没做过这一块的东西,所以刚碰到的时候想了老半天orz.后来上 ...
微信小程序之圆形进度条（自定义组件）
前言昨天在微信小程序实现了圆形进度条,今天想把这个圆形进度条做成一个组件,方便以后直接拿来用. 根据官方文档自定义组件一步一步来创建自定义组件第一步创建项目结构打开微信开发者工具创建一个项目, ...
Mpvue微信小程序时间消耗进度条组件的实现
实现效果: 组件源码: 组件主要涉及时间的计算.闰年的判断,比较简单,因此注释比较少. <progress></progress>组件为微信小程序官方的进度条. <tem ...
微信小程序进度条样式_详解微信小程序——自定义圆形进度条
微信小程序自定义圆形进度条,具体如下: 无图无真相,先上图: 实现思路,先绘制底层的灰色圆圈背景,再绘制上层的蓝色进度条. 代码实现: JS代码: 页面初始化 options为页面跳转所带来的参数 ...
微信小程序环形进度条_微信小程序实现圆形进度条实例分享
本文主要和大家分享微信小程序实现圆形进度条实例,希望能帮助到大家. 小程序中使用圆形倒计时,效果图: 思路使用2个canvas 一个是背景圆环,一个是彩色圆环. 使用setInterval 让彩色圆环 ...
微信小程序进度条组件自定义数字_微信小程序之圆形进度条（自定义组件）
前言昨天在微信小程序实现了圆形进度条,今天想把这个圆形进度条做成一个组件,方便以后直接拿来用. 根据官方文档自定义组件一步一步来创建自定义组遇新是直朋能到件第一步创建项遇新是直朋能到分览目结构 ...
微信小程序开发(4) 企业展示
在这篇微信小程序开发教程中,我们将介绍如何使用微信小程序开发企业内部宣传展示等功能. 一.小程序主体部分一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下: 1. 小程序逻辑 App({o ...
微信小程序进度条样式_微信小程序组件progress进度条解读和分析
progress进度条组件说明: 进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行. progress进度条是微信小程序的组件,和HTML5的进度条progress类似. pr ...
[微信小程序]星级评分和展示(详细注释附效果图)
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 星级评分分成两种情况: 一:展示后台给的评分数据二:用户点击第几颗星星就显示为几星评分; < ...

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

前言

实现效果如下：

实现思路

代码如下：

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

最新文章

热门文章