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. Java - 探究前后分离带来的跨域问题
  2. linux下set和eval的使用小案例精彩解答
  3. 三十九、@staticmethod、@classmethod和@property类装饰器
  4. w3ctech 2011 北京站(组图)
  5. mockito_吸收Mockito的流利度
  6. 应用层(知识架构图)
  7. mysql warning 日志_Mysql5.7.19安装后错误日志中有警告
  8. python测试工具开发面试宝典3web抓取
  9. html图片怎么设置行高,html行高怎么设置
  10. PHP第十次实验总结,The Clean Architecture in PHP 读书笔记(十)
  11. python全栈开发-Day3 字符串
  12. 开始看看repast建模方面的东西
  13. ANSYS 有限元分析 命令流 实例
  14. mysql explain是什么意思_MySQL中EXPLAIN解释命令详解
  15. ping 快ping
  16. 初二因式分解奥数竞赛题_初中数学因式分解(含答案)竞赛题精选.doc
  17. ajax的跨域和请求——详解
  18. 程序员搞笑段子锦集,内容太过真实,默默留下了感慨的泪水!
  19. 用ECharts生成统计图
  20. yocto,poky,qemu

热门文章

  1. Visifire图表
  2. 魔力宝贝账号登录分析
  3. Windows Jar包开机自启动
  4. Macos Catalina 10.15.4 (19E287) 更新后外接显示器显示BUG
  5. ECSHOP安装流程
  6. 阿里聚安全Webview安全攻防
  7. Eclipse如何开发Android?
  8. 8051单片机的内核的结构及运行过程解析
  9. 【IOS】iphone型号和Model Identifier对应关系
  10. 构建自定义的wince系统