1.效果图

注:视图的布局结构图片所示,相同颜色是同一级别,绿色标出的第三块(图片中已用3标出)是一个scroll-view,子内容是蓝色部分,每一个蓝色块作为一个块,整体通过遍历数据(for 循环)显示
2.相关代码
2.1 wxml部分

<!-- 1 订单状态 -->
<view class="part1"><view class="part1-orderStatus">物流运送中</view>
</view><!-- 2 快递类别 -->
<view class="part2"><view class="part2-2-accept"><image class="part2-1-1-img" src="{{CourierCompany.courierLogo}}"></image><view class="part2-1-2-info"><view><text class="part2-2-2-2-name">{{CourierCompany.name}}</text></view><view class="part2-2-2-2-address">官方热线 {{CourierCompany.phone}}</view></view><view class="part2-1-3-arrow"></view></view>
</view><!-- 3 物流信息 -->
<view class="part3" wx:for="{{[]}} " wx:key='item'><!-- 2 下单信息信息部分 part2  可用wx:for循环渲染--><!-- <view class="part2" wx:for="{{[1,2,3]}} " > --><view class="part3-1"><!-- 物流号 --><view class="part3-1-0"><view class="part3-1-0-name">{{CourierCompany.name}}</view><view class="part3-1-0-name">{{logisticsId}}</view><image class="part3-1-0-copy" src="../../../../../icon/orderPageIcon/copyIcon.png" data-value="{{logisticsId}}" bindtap="toCopy"></image></view><!-- part3-1-1  物流信息:收货地址--><view class="part3-1-1"><view class="part3-1-1-logo"><view class="part3-1-1-1-dot">收</view><!-- <view class="part3-1-1-2-line"> </view> --></view><view class="part3-1-1-1-info"><view class="part3-1-1-1-info1">【收货地址】{{acceptInfo.destination}}</view><view class="part3-1-1-1-info1">{{acceptInfo.phone}}</view></view></view><scroll-view scroll-y="true" style=" width:344px;height:300px"><!-- part3-1-2 物流时间轴 --><view class="part3-1-2" wx:for="{{logisticsInfo}}"><view class="part3-1-2" wx:if="{{item.status =='运输中'}}"><view class="part3-1-2-1"><view class="part3-1-2-1-currDate">{{item.data}}</view><view class="part3-1-2-1-currTime">{{item.time}}</view></view><view class="part3-1-2-2"><view class="part3-1-2-2-currUp"> </view><image class="part3-1-2-2-img" src="../../../../../icon/orderPageIcon/sendAddrIcon.png"></image><view class="part3-1-2-2-currentDown"></view></view><view class="part3-1-2-3"><view class="part3-1-2-3-currStatus">{{item.status}}</view><view class="part3-1-2-3-currAddrInfo">{{item.address}}</view></view></view><view wx:else class="part3-1-2"><view class="part3-1-2-1"><view class="part3-1-2-1-date">{{item.data}}</view><view class="part3-1-2-1-time">{{item.time}}</view></view><view class="part3-1-2-2"><view class="part3-1-2-2-up"> </view><view class="part3-1-2-2-dot"></view><view class="part3-1-2-2-down"></view></view><view class="part3-1-2-3"><view class="part3-1-2-3-status">{{item.status}}</view><view class="part3-1-2-3-addrInfo">{{item.address}}</view></view></view></view></scroll-view></view>
</view>

2.2 js 部分

const app = getApp()
Page({/*** 页面的初始数据*/data: {iphone_bottom: app.globalData.iphone_bottom,// 快递公司CourierCompany: {name: '韵达快递',courierLogo: '../../../../../icon/orderPageIcon/yunda.png',phone: 95566,},// 物流单号logisticsId: '9556656235556465',// 物流信息logisticsInfo: [{data: '05.20',time: '12:23',status:'运输中',address: "【绍兴市】已离开 浙江省诸暨市公司;发往 浙江省诸暨市山下湖分部",},{data: '05.20',time: '10:23',status:'',address: "杭州转运中心已收入",},{data: '05.20',time: '05:23',status:'',address: "杭州转运中心公司 已发出;下一站:杭州转运中心",},{data: '05.19',time: '21:23',status:'',address: "深圳转运公司 已发出,下一站,杭州转运中心公司",},{data: '05.19',time: '19:23',status:'已揽件',address: "您的包裹已发货",},{data: '05.19',time: '11:23',status:'',address: "商品已下单",},],acceptInfo:{destination: '浙江省绍兴市诸暨市陶朱街道艮塔西路136号新金融大厦',phone:18870774266},// 物流当前的状态currentStatus:'运输中'},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 自定义函数*//*** 复制运单号*/toCopy:function(e){wx.setClipboardData({data: e.currentTarget.dataset.value,success (res) {wx.getClipboardData({success (res) {console.log(res);console.log('复制获得的数据:',res.data) // data}})}})},})

2.3 wxss部分

/* <!-- 1 订单状态 --> */
.part1 {width: 100%;height: 176rpx;background-color: #166D5A;
}.part1-orderStatus {font-size: 36rpx;font-family: Source Han Sans CN;font-weight: 400;line-height: 18px;color: rgba(255, 255, 255, 1);opacity: 1;padding-top: 16rpx;margin-left: 32rpx;
}.part2 {width: 91.73%;margin: 0rpx 30rpx 12rpx 32rpx;background-color: rgba(255, 255, 255, 1);/* border: 1rpx solid teal; */position: relative;/* top: 5.06%; */top: -84rpx;box-shadow: 0px 0px 12px rgba(163, 168, 162, 0.06);opacity: 1;border-radius: 4px;
}.part2-1-send {/* width: 100%; */height: 50%;border-bottom: 1px solid rgb(206, 201, 201);margin-left: 24rpx;margin-right: 24rpx;display: flex;align-items: center;
}.part2-1-1-img {width: 64rpx;height: 64rpx;margin-top: 58rpx;margin-bottom: 58rpx;margin-right: 32rpx;
}.part2-1-2-info {width: 241px;
}.part2-1-2-1-address {font-size: 28rpx;font-family: Source Han Sans CN;font-weight: 400;line-height: 22px;color: rgba(51, 51, 51, 1);opacity: 1;}.part2-1-2-2-time {font-size: 12px;font-family: Source Han Sans CN;font-weight: 400;line-height: 18px;color: rgba(153, 153, 153, 1);opacity: 1;
}.part2-1-3-arrow {width: 15rpx;height: 15rpx;border-top: 1rpx solid rgba(153, 153, 153, 1);border-right: 1rpx solid rgba(153, 153, 153, 1);transform: rotate(45deg);position: absolute;right: 24rpx;
}.part2-2-accept {height: 50%;/* border: 1rpx solid red; */margin-left: 24rpx;margin-right: 24rpx;display: flex;align-items: center;
}.part2-2-2-2-name {font-size: 32rpx;font-family: Source Han Sans CN;font-weight: 500;line-height: 18px;color: rgba(51, 51, 51, 1);opacity: 1;margin-right: 24rpx;
}.part2-2-2-2-phone {font-size: 24rpx;font-family: Source Han Sans CN;font-weight: 400;line-height: 18px;color: rgba(153, 153, 153, 1);opacity: 1;
}.part2-2-2-2-address {font-size: 28rpx;font-family: Source Han Sans CN;font-weight: 400;line-height: 22px;color: rgba(51, 51, 51, 1);opacity: 1;
}/* part3订单信息部分*/
.part3 {position: relative;top: -34px;
}.part3-1 {width: 91.73%;background-color: white;box-shadow: 0px 0px 12px rgba(140, 143, 140, 0.06);border-radius: 8rpx;margin: 12rpx 30rpx 12rpx 32rpx;border: 1rpx solid white;opacity: 1;position: relative;/* top: -34px; */}.part3-1-0 {width: 91.74%;height: 28rpx;display: flex;align-items: center;line-height: 36rpx;margin-top: 24rpx;margin-left: 24rpx;margin-bottom: 32rpx;
}.part3-1-0-name {font-size: 28rpx;font-family: Source Han Sans CN;font-weight: 400;color: rgba(51, 51, 51, 1);opacity: 1;margin-right: 16rpx;
}.part3-1-0-copy {width: 32rpx;height: 32rpx;
}.part3-1-1 {display: flex;flex-direction: row;margin-bottom: 64rpx;
}
.part3-1-1-logo{/* width:48rpx ; */display: flex;flex-direction: column;align-items: center;
}
.part3-1-1-2-line{width: 0rpx;height: 47px;margin-left: 100rpx;margin-top: 10rpx;border: 1rpx solid #E1E1E1;
}.part3-1-1-1-dot {width: 48rpx;height: 48rpx;border-radius: 50%;background-color: rgb(156, 161, 161);box-shadow: 0px 0px 12px rgba(163, 168, 162, 0.06);opacity: 1;font-size: 14px;font-family: Source Han Sans CN;font-weight: 500;line-height: 48rpx;text-align: center;color: rgba(255, 255, 255, 1);margin-left: 96rpx;margin-right: 22rpx;}.part3-1-1-1-info {width: 69.77%;
}.part3-1-1-1-info1 {font-size: 12px;font-family: Source Han Sans CN;font-weight: 400;line-height: 18px;color: rgba(153, 153, 153, 1);opacity: 1;
}/* 物流时间轴部分 */.part3-1-2 {display: flex;width: 100%;height: 108px;/* border: 1px solid green; */align-items: center;
}.part3-1-2-1 {width:32px;margin-left: 24rpx;margin-right: 12rpx;display: flex;flex-direction: column;align-items: center;/* border: 1rpx solid red; */
}.part3-1-2-1-currDate {font-size: 12px;font-family: Source Han Sans CN;font-weight: 400;line-height: 18px;color: rgba(51, 51, 51, 1);opacity: 1;
}.part3-1-2-1-currTime {font-size: 10px;font-family: Source Han Sans CN;font-weight: 400;line-height: 18px;color: rgba(51, 51, 51, 1);opacity: 1;
}.part3-1-2-1-date {font-size: 10px;font-family: Source Han Sans CN;font-weight: 400;line-height: 18px;color: rgba(153, 153, 153, 1);opacity: 1;
}.part3-1-2-1-time {font-size: 10px;font-family: Source Han Sans CN;font-weight: 400;line-height: 18px;color: rgba(153, 153, 153, 1);opacity: 1;
}.part3-1-2-2 {width: 58rpx;height: 100%;display: flex;flex-direction: column;align-items: center;/* border: 1px solid blue; */margin-right: 24rpx;
}.part3-1-2-2-up {width: 0rpx;height: 57px;border: 1rpx solid #E1E1E1;
}.part3-1-2-2-down {width: 0px;height: 57px;border: 1rpx solid #E1E1E1;
}.part3-1-2-2-img {height: 48rpx;width: 48rpx;margin-top: 10rpx;margin-bottom: 10rpx;
}.part3-1-2-2-dot {height: 16rpx;width: 16rpx;border-radius: 50%;background-color: #E1E1E1;margin: 5rpx;
}.part3-1-2-2-currUp {width: 0rpx;height: 37px;border: 1rpx solid #999999;
}.part3-1-2-2-currentDown {width: 0rpx;height: 37px;border: 1rpx solid #999999;
}.part3-1-2-3 {width: 69.77%;}.part3-1-2-3-status {font-size: 24rpx;font-family: Source Han Sans CN;font-weight: 400;line-height: 18px;color: #999999;opacity: 1;
}.part3-1-2-3-addrInfo {font-size: 24rpx;font-family: Source Han Sans CN;font-weight: 400;line-height: 18px;color: #999999;opacity: 1;
}.part3-1-2-3-currStatus {font-size: 28rpx;font-family: Source Han Sans CN;font-weight: 500;line-height: 18px;color: #333333;opacity: 1;
}.part3-1-2-3-currAddrInfo {font-size: 24rpx;font-family: Source Han Sans CN;font-weight: 400;line-height: 18px;color: #333333;opacity: 1;
}

微信小程序:关于物流样式的显示相关推荐

  1. 微信小程序加载并且编译显示富文本编辑器内容

    微信小程序如何加载并且显示百度编辑器中的内容 一. 下载wxParse文件夹放在根目录下(可以随意更改位置,只要后续能引入成功即可) 二. 在js文件中引入wxParse.js var WxParse ...

  2. 微信小程序关注公众号模板显示隐藏问题

    微信小程序关注公众号模板显示隐藏问题 最近做了一个微信小程序内跳转关注公众号的需求,本来按照API的写法是可以直接搞定的.但是产品需求是要点击按钮之后,再弹出关注公众号组件,然后点击关闭按钮之后要关掉 ...

  3. 微信小程序动态修改样式

    前言 微信小程序动态修改样式:循环数组显示到页面,点击单独的按钮变换单独样式 一.wxml <view class="fb_tips"wx:for="{{arr11 ...

  4. uni-app微信小程序动态样式设置;微信小程序style行内式无效;微信小程序style行内式编译报错;微信小程序:style设置样式

    场景:微信小程序设置动态样式,有些时候是需要用到变量来书写的:但是实际使用发现,行内式书写虽然有效,但是会使得微信小程序的编辑失败:故需要使用动态的v-bind来写动态变量行内式样式(既使用:styl ...

  5. 微信小程序背景图真机显示不了

    微信小程序在本地开发工具正常显示图片(包括背景图),在真机显示不了,常见的几种情况: 1.微信小程序背景图真机显示不了 微信小程序如何设置背景图片? | 微信开放社区 微信小程序设置背景图片不显示问题 ...

  6. 微信小程序背景图片全屏显示

    微信小程序背景图片全屏显示 很多人在写小程序界面的时候希望背景图片是全屏覆盖显示的(包括顶部导航栏,如下图),那该如何实现呢? 以下是实现代码: wxml代码: <view class=&quo ...

  7. 微信小程序中苹果iOS手机显示时间格式NaN不正确的问题

    项目场景: 实现安卓Android和苹果iOS中微信小程序显示订单时间信息 问题描述 微信小程序中苹果iOS手机显示时间格式NaN不正确的问题 原因分析: 安卓微信小程序显示正常,苹果按格式YYYY- ...

  8. 视频教程-微信小程序界面设计-样式入门到精通-微信开发

    微信小程序界面设计-样式入门到精通 04年进入计算机行业.拥有6年net和php项目开发经验,8年java项目开发经验. 现前端全栈工程师,主攻产品设计,微信开发等. 黄菊华 ¥66.00 立即订阅 ...

  9. 微信小程序:video标签默认显示视频的第一帧作为封面

    微信小程序:video标签默认显示视频的第一帧作为封面 <video src="video_url"controls="{{false}}"initial ...

  10. 微信小程序使用物流查询插件

    微信小程序使用物流查询插件 文章目录 微信小程序使用物流查询插件 添加插件 添加成功 使用方式 声明使用插件 引入插件包 效果图 物流查询插件 添加插件 登录微信公众平台后台->设置->第 ...

最新文章

  1. MESSL(maven + extjs + spring portlet mvc + spring web flow + liferay )整合架构 5
  2. linux系统基础入门,虚惊一场
  3. 中小微企业谋定发展-国情讲坛·周荣江: 破解民营经济融资难
  4. 单播,组播,广播的区别
  5. 运动目标检测、阴影检测及目标跟踪中用得到的标准测试视频下载(大量IBM提供视频)...
  6. gitee github区别_Github吃大力 速度飙升 2MB/s
  7. JAVA设计模式 - 单例模式
  8. IIS asp.net 4.0
  9. 2011/05/19
  10. cad没有命令输入框_cad中怎么输入文字?cad怎么输入文字?
  11. 数字图像处理·SLIC超像素分割算法C++实现
  12. 51单片机的定时器/计数器
  13. linux est 时间,Linux中的时区设置
  14. 绿色商业包装材料在行业中的重要地位
  15. ios手机编辑html转pdf文件,苹果手机居然能一键转换PDF文件?iPhone老司机才知道...
  16. Mac下如何将Safari书签导入Chrome
  17. 网页设计之竞赛平台模块
  18. 训练指南 UVALive - 4043(二分图匹配 + KM算法)
  19. FPGA数字时钟系统-设计教程
  20. 我的CTF之旅(四)

热门文章

  1. html在线购物系统论文,在线购物系统的设计与实现
  2. 魔力宝贝 mysql,【法兰城回忆】【安卓手游】【俗称魔力宝贝手游版】【全套架设教程】[手工架设]...
  3. 0102数据结构和图处理算法-无向图-数据结构和算法(Java)
  4. XDOC云服务API(六)
  5. 粒子群算法matlab代码(注释很详细哦,图像也美美哒,任意维度)
  6. Hyper Thread
  7. mysql、mysqli、PDO
  8. java搜索代码_Java实现搜索功能代码详解
  9. matlab计算正交变换,基于Matlab的LFM信号的正交变换和脉冲压缩
  10. 如何学习MATLAB