wxml文件
view view class='topExpress' view class='topExpress-left' image src='../../images/america.png' style='width:80rpx;height:80rpx;border-radius:50%;'/image /view view class='topExpress-right' view class='topExpress-right-top'xx速递/view view class='topExpress-right-middle'运单号：xxxxxxxxxxxxxxxxxx/view view class='topExpress-right-bottom'官方电话 xxxxxxxx/view /view /view view class='express-container' view class='express-item' wx:for="{{[1, 2, 3, 4, 5]}}" wx:key="*this" view class='express-left-date' view{{item % 2 == 0 ? '昨天' : '2018-11-21'}}/view view10:30/view /view !-- 左边子容器 -- view class='express-middle-axis' !-- 显示顶部收的圆点 -- view class='dot-shou' wx:if="{{index==0}}"收/view !-- 正在进行的时间轴上半个时间线 -- view class='online-top-closing'/view !-- 正在进行的时间轴点 -- view class='dot-closing'/view !-- 正在进行的时间轴下半个时间线 -- view class='online-bottom'/view !-- 显示尾部的圆点 -- view class='dot-closing' wx:if="{{index==list.length - 1}}"/view /view !-- 右边子容器 -- view class='express-right' view class='express-statusing'运输中/view view class='express-status-address'【上海市】快件已从上海航空部发出，准备发往深圳转运中心/view /view /view /view/viewwxss文件
page { font-size: 0.8rem;}.topExpress { width: 720rpx; height: 180rpx; background: whitesmoke; margin: 10rpx auto; display: flex; border-radius: 5px;}.topExpress-left { width: 100rpx; height: 100%; display: flex; justify-content: center; align-items: center;}.topExpress-right { color: #333; display: flex; justify-content: space-around; flex-direction: column; align-items: flex-start; padding: 20rpx 5rpx;}.topExpress-right-middle { font-size: 0.8rem;}.topExpress-right-bottom { color: #666;}.express-container { width: 720rpx; margin: 10rpx auto; background: whitesmoke; border-radius: 5px; padding: 10rpx 0;}.express-item { display: flex; width: 100%; justify-content: start;}.express-middle-axis { display: flex; width: 48rpx; flex-direction: column; align-items: center; justify-content: center;}.express-left-date { display: flex; width: 300rpx; align-items: center; flex-direction: column; justify-content: center;}.online-top-closing { width: 1px; height: 80rpx; background: #d7d7d7;}.dot-closing { width: 10rpx; height: 10rpx; border-radius: 50%; margin-top: 6rpx; margin-bottom: 6rpx; background: #fe4f33;}.dot-shou { width: 30rpx; height: 30rpx; border-radius: 50%; background: #999; font-size: 18rpx; color: #fff; display: flex; justify-content: center; align-items: center;}.online-bottom { width: 1px; height: 80rpx; background: #999;}.express-right { display: flex; flex-grow: 1; flex-direction: column; margin: 0 20rpx; justify-content: center;}js文件
// pages/expressDetail/expressDetail.jsPage({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { },})没有处理数据的逻辑，js不需要修改。
预览
