本文给大家带来的是微信小程序支出记录订单列表设计制作开发教程，制作好以后效果图如下：
一、wxml页面代码如下：
<!--tradeAccount.wxml 收入 交易记录-->
<view class="in">
<view class="left">
<text class="left-in">支出记录</text>
</view>
<view class="right">
<text class="right-in">收入记录</text>
</view>
</view>
<view class="record">
<view class="on">
<text class="action">提取金额</text>
<text class="money">微信支付：¥170.00</text>
</view>
<view class="under">
<text class="time">交易时间: <text class="detail">2017-07-18 09:18</text> </text>
<text class="succerr">交易成功</text>
</view>
</view>
<view class="record">
<view class="on">
<text class="action">支付-订单号(0214528765)</text>
<text class="money">微信支付：¥300.00</text>
</view>
<view class="under">
<text class="time">交易时间: <text class="detail">2017-07-15 14:33</text> </text>
<text class="succerr">交易成功</text>
</view>
</view>
<view class="record">
<view class="on">
<text class="action">支付-订单号(4564646466)</text>
<text class="money">微信支付：¥300.00</text>
</view>
<view class="under">
<text class="time">交易时间: <text class="detail">2017-07-05 10:21</text> </text>
<text class="succerr">交易成功</text>
</view>
</view>
<view class="tips">
温馨提示：充值与提现请到电脑端进行操作！
</view>
|
二、wxss样式文件代码如下：
/* tradeoutAccount.wxss *//* tradeAccount.wxss */
.in{
background-color:#ffffff;
display:flex;
justify-content:center;
padding:15px;
margin-bottom:15px;
}
.left{
border-right:1px solid #d6d6d6;
padding-right:20px;
}
.right{
padding-left:20px;
}
.left-in{
color: #f9364f;
}
.right-in{
color: #9a9a9a;
}
.record{
margin-bottom:7px;
background-color:#ffffff;
padding:12px 10px;
}
.under{
margin-top:15px;
}
.action{
/* font-size:17px; */
}
.money{
float:right;
color:#f9364f;
}
.time{
color:#999999;
font-size:13px;
}
.detail{
margin-left:5px;
}
.succerr{
float:right;
color:#999999;
font-size:13px;
}
.tips{
margin-top:20px;
color:#999999;
padding:0 10px;
}
|
三、js页面代码如下：
// tradeoutAccount.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
|
.jpg)
.jpg)
