做一个模拟,实际应用中换成request即可
wxml
<view class="PersonPoints">积分:<text>{{StorePoints}}</text></view>
<block wx:for="{{ExchangeInfo}}">
<view class="Record">
<text class="ExchangeName">{{item.ExchangeName}}</text>
<text class="ExchangeDate">{{item.ExchangeDate}}</text>
<text class="GetPoints" wx:if="{{item.PayPoints>0}}">{{item.PayPoints}}</text>
<text class="PayPoints" wx:if="{{item.PayPoints<0}}">{{item.PayPoints}}</text>
</view>
</block>
<view class="upload" hidden="{{HiddenFlag}}">
<image src="../../image/loading.png" class="loadding"></image>
</view>
js
/*
* @Author: wdl
* @Date: 2017-11-08 15:06:42
* @Last Modified by: wdl
* @Last Modified time: 2017-12-14 16:36:57
*/
Page({
data:{
StorePoints:"¥987",
HiddenFlag: true,
ExchangeInfo:[
{
ExchangeName:"兑换5¥代金券",
ExchangeDate:"2017-12-08 10:05:36",
PayPoints:"-100",
},
{
ExchangeName:"进店消费",
ExchangeDate:"2017-12-08 10:05:36",
PayPoints:"+600",
},
{
ExchangeName:"兑换10¥代金券",
ExchangeDate:"2017-12-08 10:05:36",
PayPoints:"-190",
},
{
ExchangeName:"兑换5¥代金券",
ExchangeDate:"2017-12-08 10:05:36",
PayPoints:"-100",
},
{
ExchangeName:"进店消费",
ExchangeDate:"2017-12-08 10:05:36",
PayPoints:"+600",
},
{
ExchangeName:"兑换10¥代金券",
ExchangeDate:"2017-12-08 10:05:36",
PayPoints:"-190",
},
{
ExchangeName:"兑换5¥代金券",
ExchangeDate:"2017-12-08 10:05:36",
PayPoints:"-100",
},
],
},
onPullDownRefresh(){
wx.showToast({
title: '刷新成功',
icon: 'success',
duration: 2000
})
wx.stopPullDownRefresh()
},
onReachBottom() {
this.loadMore();
},
loadMore(){
var that = this;
var list=that.data.ExchangeInfo;
that.setData({
HiddenFlag: false
});
//实际中应换为request
for(var i=1;i<5; i++){
list.push({
ExchangeName:i+"兑换5¥代金券",
ExchangeDate:"2017-12-08 10:05:36",
PayPoints:"-100",
})
}
console.log(that.data.ExchangeInfo+"1243543645safasf");
setTimeout(function(){
that.setData({
ExchangeInfo:list,
HiddenFlag: true
})
},2000)
}
})
wxss
.PersonPoints{
padding:30rpx 2%;
font-size:40rpx;
border-bottom:8rpx solid #f1f1f1;
font-weight:700;
}
.PersonPoints::before{
content:"|";
color:#fc5b39;
font-weight:700;
font-size:34rpx;
margin-right:10rpx;
}
.PersonPoints text{
padding-left:10rpx;
color:#fc5b39;
}
.Record{
position:relative;
padding:24rpx 4%;
border-bottom:1rpx solid #f1f1f1;
}
.ExchangeName,.ExchangeDate{
display:block;
}
.ExchangeName{
font-size:42rpx;
/*color:#fc5b39;*/
color:#333;
margin-bottom:10rpx;
}
.ExchangeDate{
font-size:28rpx;
color:#333;
}
.PayPoints{
position:absolute;
right:4.5%;
top:40rpx;
color:#fe3939;
font-size:52rpx;
}
.GetPoints{
position:absolute;
right:4.5%;
top:40rpx;
color:#23dd04;
font-size:52rpx;
}
.upload{
text-align:center
}
.loadding{
width:120rpx;
height:120rpx;
}
如果看不明白把代码拷贝到你的项目中,就能看明白了