微信小程序：关于物流样式的显示

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;
}

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

微信小程序加载并且编译显示富文本编辑器内容
微信小程序如何加载并且显示百度编辑器中的内容一. 下载wxParse文件夹放在根目录下(可以随意更改位置,只要后续能引入成功即可) 二. 在js文件中引入wxParse.js var WxParse ...
微信小程序关注公众号模板显示隐藏问题
微信小程序关注公众号模板显示隐藏问题最近做了一个微信小程序内跳转关注公众号的需求,本来按照API的写法是可以直接搞定的.但是产品需求是要点击按钮之后,再弹出关注公众号组件,然后点击关闭按钮之后要关掉 ...
微信小程序动态修改样式
前言微信小程序动态修改样式:循环数组显示到页面,点击单独的按钮变换单独样式一.wxml <view class="fb_tips"wx:for="{{arr11 ...
uni-app微信小程序动态样式设置；微信小程序style行内式无效；微信小程序style行内式编译报错；微信小程序:style设置样式
场景:微信小程序设置动态样式,有些时候是需要用到变量来书写的:但是实际使用发现,行内式书写虽然有效,但是会使得微信小程序的编辑失败:故需要使用动态的v-bind来写动态变量行内式样式(既使用:styl ...
微信小程序背景图真机显示不了
微信小程序在本地开发工具正常显示图片(包括背景图),在真机显示不了,常见的几种情况: 1.微信小程序背景图真机显示不了微信小程序如何设置背景图片? | 微信开放社区微信小程序设置背景图片不显示问题 ...
微信小程序背景图片全屏显示
微信小程序背景图片全屏显示很多人在写小程序界面的时候希望背景图片是全屏覆盖显示的(包括顶部导航栏,如下图),那该如何实现呢? 以下是实现代码: wxml代码: <view class=&quo ...
微信小程序中苹果iOS手机显示时间格式NaN不正确的问题
项目场景: 实现安卓Android和苹果iOS中微信小程序显示订单时间信息问题描述微信小程序中苹果iOS手机显示时间格式NaN不正确的问题原因分析: 安卓微信小程序显示正常,苹果按格式YYYY- ...
视频教程-微信小程序界面设计-样式入门到精通-微信开发
微信小程序界面设计-样式入门到精通 04年进入计算机行业.拥有6年net和php项目开发经验,8年java项目开发经验. 现前端全栈工程师,主攻产品设计,微信开发等. 黄菊华 ¥66.00 立即订阅 ...
微信小程序：video标签默认显示视频的第一帧作为封面
微信小程序:video标签默认显示视频的第一帧作为封面 <video src="video_url"controls="{{false}}"initial ...
微信小程序使用物流查询插件
微信小程序使用物流查询插件文章目录微信小程序使用物流查询插件添加插件添加成功使用方式声明使用插件引入插件包效果图物流查询插件添加插件登录微信公众平台后台->设置->第 ...

微信小程序：关于物流样式的显示

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

最新文章

热门文章