本文给大家带来的是微信小程序快递运单号跟踪记录设计制作开发教程，制作好以后效果图如下：
一、wxml页面代码如下：
<!--pages/waybillDetailTrans/waybillDetailTrans.wxml-->
<view class="waybill">
<view class="topwrap">
<text class="common">状态: <text class="word">已收货</text></text>
<text class="common">跟踪号: <text class="word">4464644</text></text>
<text class="common">收货人: <text class="word">布兰奇MA</text></text>
</view>
</view>
<view class="waybill">
<view class="topwrap">
<text class="common">运单号: <text class="word">1131131345431</text></text>
<text class="common">运输方式: <text class="word">EMS</text></text>
<text class="common">提交时间: <text class="word">2017-07-01</text></text>
</view>
</view>
<view class="table">
<view class="tr bg-w">
<view class="th">时间</view>
<view class="th_place">地点和跟踪进度</view>
</view>
<view class="tr">
<view class="td">2017-07-11 21:28:28</view>
<view class="td_place" >邯郸|发件【邯郸市集散中心】,正准备发往【保定】</view>
</view>
<view class="tr">
<view class="td">2017-07-11 21:28:28</view>
<view class="td_place" >邯郸|发件【邯郸市集散中心】</view>
</view>
<view class="tr">
<view class="td">2017-07-11 21:28:28</view>
<view class="td_place" >邯郸|发件【邯郸市集散中心】</view>
</view>
<!-- <block wx:for="{{listData}}">
<view class="tr">
<view class="td">{{item.time}}</view>
<view class="td_place">{{item.place}}</view>
</view>
</block> -->
</view>
|
二、wxss样式文件代码如下：
/* pages/waybillDetailTrans/waybillDetailTrans.wxss */
.waybill{
padding:15px;
background-color:#ffffff;
margin-top:5px;
}
.topwrap{
}
.common{
display:block;
margin-bottom:5px;
color:#666666;
}
.word{
color:#a3a3a3;
}
/*table */
.table {
border: 0px solid darkgray;
padding:15px;
margin-top:10px;
}
.tr {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
margin: 0 0;
}
.td {
color:#999999;
height: 35px;
padding: 5px;
width:30%;
justify-content: center;
border-left: 1rpx solid #c8c8c8;
border-right: 1rpx solid #c8c8c8;
border-bottom: 1rpx solid #c8c8c8;
}
.td_place {
color:#999999;
padding: 5px;
height: 35px;
width:70%;
justify-content: center;
text-align: left;
border-right: 1rpx solid #c8c8c8;
border-bottom: 1rpx solid #c8c8c8;
}
.bg-w{
background: snow;
}
.bg-g{
background: #E6F3F9;
}
.th {
padding: 5px;
width: 30%;
justify-content: center;
background: #eeeeee;
color: #666666;
border: 1rpx solid #c8c8c8;
border-right: none;
display: flex;
align-items: center;
}
.th_place {
padding: 5px;
width: 70%;
justify-content: center;
background: #eeeeee;
color: #666666;
border: 1rpx solid #c8c8c8;
display: flex;
align-items: center;
}
|
三、js页面代码如下：
// pages/waybillDetailTrans/waybillDetailTrans.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
|
.jpg)
.jpg)
