本文给大家带来的是微信小程序我的运单查看列表页面设计制作开发教程，制作好以后效果图如下：
一、wxml页面代码如下：
<!--pages/mywaybillTrans/mywaybillTrans.wxml-->
<view class="waybill">
<view class="top" bindtap="showorhide">
<view class="left">
<image class="limg" src="../../images/trans/2.png"></image>
<text class="lword">我的运单</text>
</view>
<view class="right" >
<text class="rword">所有运单</text>
<image src="{{arrowImg[index]}}" class="rimg"></image>
</view>
</view>
<view class="table" hidden="{{hide}}">
<view class="row title">
<view class="commitTime ">提交时间</view>
<view class="peopleWay ">收货人/运单号</view>
<view class="trace ">跟踪号</view>
<view class="action ">操作</view>
</view>
<view class="row detail">
<view class="commitTime center">2017-07-11</view>
<view class="peopleWay center">
<text class="name">布兰奇MA</text>
<text class="number">456464346445</text>
</view>
<view class="trace center">
<text class="status">布兰奇MA</text>
<text class="traceNum">4646464</text>
</view>
<view class="action centerme">
<button type="default" class="see" style="background:linear-gradient(to bottom,#d6d6d6 0%,#bcbcbc 100%);color:#279edb;line-height:12px;padding:5px 0 " size="mini">查看</button>
</view>
</view>
<view class="row detail">
<view class="commitTime center">2017-07-11</view>
<view class="peopleWay center">
<text class="name">布兰奇MA</text>
<text class="number">456464346445</text>
</view>
<view class="trace center">
<text class="status">布兰奇MA</text>
<text class="traceNum">4646464</text>
</view>
<view class="action centerme">
<button type="default" class="see" style="background:linear-gradient(to bottom,#d6d6d6 0%,#bcbcbc 100%);color:#279edb;line-height:12px;padding:5px 0 " size="mini">查看</button>
<button type="default" class="get" style="background:linear-gradient(to bottom,#d6d6d6 0%,#bcbcbc 100%);color:#fa344a;line-height:12px;padding:5px 0 " size="mini">收货</button>
</view>
</view>
<view class="row detail">
<view class="commitTime center">2017-07-11</view>
<view class="peopleWay center">
<text class="name">布兰奇MA</text>
<text class="number">456464346445</text>
</view>
<view class="trace center">
<text class="status">布兰奇MA</text>
<text class="traceNum">4646464</text>
</view>
<view class="action centerme">
<button type="default" class="see" style="background:linear-gradient(to bottom,#d6d6d6 0%,#bcbcbc 100%);color:#279edb;line-height:12px;padding:5px 0 " size="mini">查看</button>
<button type="default" class="get" style="background:linear-gradient(to bottom,#d6d6d6 0%,#bcbcbc 100%);color:#fa344a;line-height:12px;padding:5px 0 " size="mini">收货</button>
</view>
</view>
</view>
</view>
|
二、wxss样式文件代码如下：
/* pages/mywaybillTrans/mywaybillTrans.wxss */
.waybill{
background-color:#ffffff;
padding:15px;
}
.top{
justify-content:space-between;
align-items:center;
background-color:gray;
display: flex;
padding: 10px 5px;
border-radius: 5px;
color: #ffffff;
}
.limg{
width:15px;
height:15px;
}
.rimg{
width:21px;
height:15px;
}
.left{
display: flex;
}
.right{
display: flex;
}
.lword{
margin-left:5px;
}
.rword{
margin-right:5px;
}
.table{
background-color:#eeeeee;
margin-top:15px;
padding:10px;
}
.row{
margin-bottom: 10px;
width:100%;
display:flex;
justify-content:space-between;
text-align:center;
}
.commitTime{
width: 23%;
}
.peopleWay{
width: 30%;
}
.trace{
width: 23%;
}
.action{
width: 18%;
}
.name{
margin-bottom: 5px;
}
.status{
margin-bottom: 5px;
}
.detail{
height: 100px;
}
.center{
display:flex;
vertical-align:middle;
flex-flow:column wrap;
justify-content:center;
align-items:center;
background-color: #ffffff;
color: #999999;
font-size: 13px;
overflow: scroll;
border: 1px solid #c8c8c8;
}
.centerme{
display:flex;
vertical-align:middle;
flex-flow:column wrap;
justify-content:center;
align-items:center;
color: #999999;
font-size: 13px;
overflow: scroll;
border: 1px solid #eeeeee;
}
.see{
width:55px;
margin:10px 0;
}
.title{
color: #696969;
}
.get{
width:55px;
margin: 10px 0;
}
|
三、js页面代码如下：
// pages/mywaybillTrans/mywaybillTrans.js
Page({
/**
* 页面的初始数据
*/
data: {
hide:false,
index:0,
arrowImg: ['../../images/common/white-bottom-arrow.png','../../images/common/white-left-arrow.png']
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
showorhide:function(){
var hide=this.data.hide===true?false:true;
var index=hide?1:0;
this.setData({
hide:hide,
index:index,
})
}
})
|
.jpg)
.jpg)
