微信小程序实现物流步骤条

1.效果图

2.完整代码：

码云链接：https://gitee.com/susuhhhhhh/wxmini_demo

3.部分代码


<!-- 物流区 -->
<view class="con1 flex-row"><view><image src="/img/order_icon5.png" class="order_icon"></image></view><view class="w_text"><view class="item">订单编号：{{expresslist.order_no}}</view><view class="item">物流公司：{{expresslist.de_company}}</view><view class="item">物流单号：{{expresslist.wuliu_no}}</view></view>
</view>
<view class="con4" wx:if="{{expresslist.list.length>0}}"><view class="con4_top1">物流信息</view><!-- 物流列表 --><view class="con4_top3 flex" wx:for="{{expresslist.list}}"><view class="con4_text"wx:key="key" wx:for-item='item'><text class="con4_time {{index==0?'':'no'}}">{{item.status}}  {{item.time}}</text><view class="line_ellipsis text ">{{item.text}}</view><view class="con4_icon"  wx:if="{{index==0}}"><image wx:if="{{item.display==0}}" src="/img/wuliu_icon2.png" class="chek_img"></image><image wx:if="{{item.display==1}}" src="/img/wuliu_icon3.png" class="chek_img"></image><image wx:if="{{item.display==2}}" src="/img/wuliu_icon4.png" class="chek_img"></image><image wx:if="{{item.display==3}}" src="/img/wuliu_icon5.png" class="chek_img"></image></view><!-- 当第二个开始有一条物流的横线 --><view class="con4_icon"  wx:else><image wx:if="{{item.display==0}}" src="/img/wuliu_icon2.png" class="chek_img"></image><image wx:if="{{item.display==1}}" src="/img/wuliu_icon3.png" class="chek_img"></image><image wx:if="{{item.display==2}}" src="/img/wuliu_icon4.png" class="chek_img"></image><image wx:if="{{item.display==3}}" src="/img/wuliu_icon5.png" class="chek_img"></image><view class="line"></view></view></view></view>
</view>

/* wuliu */
.con1{width: 700rpx;background: #682074;box-shadow: 0px 5rpx 18rpx 3rpx rgba(176, 176, 176, 0.06);border-radius: 20rpx;margin: 40rpx 25rpx;padding: 26rpx 25rpx ;box-sizing: border-box;
}
.order_icon{width: 150rpx;height: 120rpx;
}
.w_text{margin-left: 30rpx;color: #fff;font-size:25rpx;
}
.item{margin-bottom: 20rpx;
}
.item:last-child{margin-bottom: 0;
}
.con4{width: 700rpx;background: #FFFFFF;box-shadow: 0px 5rpx 18rpx 3rpx rgba(176, 176, 176, 0.06);border-radius: 20rpx;margin: 40rpx 25rpx;padding: 26rpx 25rpx 56rpx ;box-sizing: border-box;
}
.con4_top1{text-align: center;font-size: 32rpx;font-weight: 500;color: #333333;margin-bottom: 35rpx;
}
.con4_top2{font-size: 24rpx;color: #666;margin-bottom: 42rpx;
}
.con4_img{width: 25rpx;height: 28rpx;
}
.chek_img{width: 52rpx;height: 52rpx;
}
.con4_top3{margin-bottom: 53rpx;position: relative;
}
.con4_top3:last-child{margin-bottom:0
}
.con4_icon{position: absolute;left: 0rpx;top: 0rpx;
}
.con4_text{font-size: 22rpx;font-weight: 400;color: #666666;/* border-left: 2rpx solid #c9c9c9; */padding-left: 51rpx;margin-left: 23rpx
}
.con4_time{font-size: 28rpx;font-weight: 500;color: #682074;
}
.con4_icon1{position: absolute;left: 0rpx;top: 0rpx;
}
.line{width: 2rpx;height: 95rpx;background: #999999;position: absolute;top: -93rpx;left: 25rpx;
}
.text{font-size: 22rpx;font-weight: 400;color: #666666;
}
.no{font-size: 28rpx;font-weight: 500;color: #666666;
}

data: {//物流情况expresslist:{order_no:'1q213232132',de_company:'顺丰',wuliu_no:'73584y357349',list:[{display:'0',//已签收 判断是否加class条件status:'已签收',text:'【揭阳市】已离开 广东揭阳分拨中心：发往啦啦啦啦说的话凤凰大：发往啦啦啦啦说的话凤凰大啦啦说的话凤凰大厦附近收到回复的就是',time:'2020-06-20 18:33:42'},{display:'1',status:'待取件',text:'【揭阳市】已离开 广东揭阳分拨中心：发往啦啦啦啦说的话凤凰大厦附近收到回复的就是',time:'2020-06-20 18:33:42'},{display:'2',status:'派送中',text:'【揭阳市】已离开 广东揭阳分拨中心：发往啦啦啦啦说的话凤凰大厦附近收到回复的就是',time:'2020-06-20 18:33:42'},{display:'3',status:'运输中',text:'【揭阳市】已离开 广东揭阳分拨中心：发往啦啦啦啦说的话凤凰大厦附近收到回复的就是',time:'2020-06-20 18:33:42'},]}},

微信小程序实现物流步骤条相关推荐

微信小程序——漂亮的步骤条（好看）
漂亮的步骤条效果图: 这里实现4个步骤,要其他步骤的可以根据代码来改,下面我们来看看代码具体是怎么实现的: .js代码 Page({data: {stepList: [{name: '开始'}, { ...
微信小程序原生横向步骤条steps
效果代码调用 <rug-step options="{{steps}}" active="{{stepActive}}"></rug-st ...
微信小程序之圆形进度条（自定义组件）
前言昨天在微信小程序实现了圆形进度条,今天想把这个圆形进度条做成一个组件,方便以后直接拿来用. 根据官方文档自定义组件一步一步来创建自定义组件第一步创建项目结构打开微信开发者工具创建一个项目, ...
微信小程序环形进度条_微信小程序实现圆形进度条实例分享
本文主要和大家分享微信小程序实现圆形进度条实例,希望能帮助到大家. 小程序中使用圆形倒计时,效果图: 思路使用2个canvas 一个是背景圆环,一个是彩色圆环. 使用setInterval 让彩色圆环 ...
微信小程序进度条组件自定义数字_微信小程序之圆形进度条（自定义组件）
前言昨天在微信小程序实现了圆形进度条,今天想把这个圆形进度条做成一个组件,方便以后直接拿来用. 根据官方文档自定义组件一步一步来创建自定义组遇新是直朋能到件第一步创建项遇新是直朋能到分览目结构 ...
微信小程序从零开始开发步骤（二）创建小程序页面
上一章注册完小程序,添加新建的项目,大致的准备开发已经完成,本章要分享的是要创建一个简单的页面了,创建小程序页面的具体几个步骤: 1. 在pages 中添加一个目录选中page,右击鼠标,从硬盘打 ...
微信小程序使用物流查询插件
微信小程序使用物流查询插件文章目录微信小程序使用物流查询插件添加插件添加成功使用方式声明使用插件引入插件包效果图物流查询插件添加插件登录微信公众平台后台->设置->第 ...
微信小程序从零开始开发步骤（三）底部导航栏
上一章节,我们分享了如何创建一个新的页面和设置页面的标题,这一章我们来聊聊底部导航栏是如何实现的.即点击底部的导航,会实现不同对应页面之间的切换. 我们先来看个我们要实现的底部导航栏的效果图:(三个导 ...
Mpvue微信小程序时间消耗进度条组件的实现
实现效果: 组件源码: 组件主要涉及时间的计算.闰年的判断,比较简单,因此注释比较少. <progress></progress>组件为微信小程序官方的进度条. <tem ...
微信小程序从零开始开发步骤（三）
上一章节,我们分享了如何创建一个新的页面和设置页面的标题,这一章我们来聊聊底部导航栏是如何实现的.即点击底部的导航,会实现不同对应页面之间的切换. 我们先来看个我们要实现的底部导航栏的效果图:(三个导 ...

微信小程序实现物流步骤条

1.效果图

2.完整代码：

3.部分代码

微信小程序实现物流步骤条相关推荐

最新文章

热门文章