首先设定json文件中:
"enablePullDownRefresh":
true
wxml: 这里显示的数据改为自己的
<
view
>
<!--true展示数据 false显示图片 -->
<
view
class=
"cont"
style=
'display:{{show_none}}'><
image
class=
'btnsssssss'
src=
'../../image/fuwu.png'></
image
>
<
text
class=
'con_names'>{{name}}
</
text
></
view
>
<
view
class=
'btn_class'
wx:for=
"{{list}}"
wx:key=
"key"
bindtap=
'btn_click'
data-types=
"{{item.order_project_type}}"
data-dates=
"{{item.create_time}}"
data-car_base=
"{{item.order_car_info}}"
data-money=
"{{item.pay_price}}"
data-switch_name=
'{{item.switch_name}}'>
<
label
class=
'order_base'>订单类型：
<
text
class=
'text_daiban'>{{item.order_project_type}}
</
text
></
label
>
<
view
class=
'writes'></
view
>
<
label
class=
'dates'>下单时间：{{item.create_time}}
</
label
>
<
label
class=
'car_base'>车型信息：
<
text
class=
'inp_text'>{{item.order_car_info}}
</
text
></
label
>
<
label
class=
'money'>消费金额：{{item.pay_price}}
</
label
>
<!-- -->
<
label
wx:if=
"{{item.status_code==2}}"
class=
'ban iconfont icon-shijian'> {{item.order_status}}
</
label
>
<
label
wx:else
class=
'bans iconfont icon-shijians'> {{item.order_status}}
</
label
>
<!-- <lable class="ban iconfont icon-shijian">{{item.switch_name}}</label> -->
</
view
>
</
view
>
js:
var url =
"请求后台数据的url";
// 页数
var page =
1;
Page({
data: {
//如果没有数据 设置true显示，false不显示，显示一个提示图片信息
show_none:
'none',
name:
"您还没有订单哦!",
hidden:
true,
// 声明一个数据接收返回的数据
list: [],
// 用户ID
merber_id:
1,
},
// 初始化数据
onLoad:
function () {
var that =
this;
that.data.merber_id = wx.getStorageSync(
"member_id");
// 这里要注意，微信的scroll-view必须要设置高度才能监听滚动事件，所以，需要在页面的onLoad事件中给scroll-view的高度赋值
wx.getSystemInfo({
success:
function (res) {
that.setData({
scrollHeight: res.windowHeight
});
}
});
wx.request({
url: url,
method:
"post",
data: {
// 需要传递的参数
member_id: that.data.merber_id,
length: page,
// 页数，默认第一页
},
success:
function (res) {
//console.info(that.data.list);
console.log(res);
var num=res.data.data.data.length;
console.log(num);
// 判断数据长度如果不等于0，前台展示数据，false显示暂无订单提示信息
if (num !=
0) {
that.setData({
list: res.data.data.data,
show_none:
'none'
})
}
else {
that.setData({
list: res.data.data.data,
show_none:
'block'
})
}
that.setData({
hidden:
true
});
}
});
},
// 点击view获取到相应信息并跳转页面
btn_click:
function (event) {
console.log(event);
},
// 下拉刷新
onPullDownRefresh:
function () {
// 显示顶部刷新图标
wx.showNavigationBarLoading();
var that =
this;
wx.request({
url:
url ,
method:
"post",
data: {
member_id: that.data.merber_id,
length:
0,
},
// 请求头部
header: {
'content-type':
'application/json'
},
success:
function (res) {
console.log(
"刷新" + res.data.data.data);
that.setData({
list: res.data.data.data
});
// 隐藏导航栏加载框
wx.hideNavigationBarLoading();
// 停止下拉动作
wx.stopPullDownRefresh();
}
})
},
// 加载更多
onReachBottom:
function () {
var that =
this;
// 显示加载图标
wx.showLoading({
title:
'正在加载中',
})
page++;
// 页数+1
wx.request({
url:
url,
method:
"post",
data: {
member_id: that.data.merber_id,
length: page,
},
// 请求头部
header: {
'content-type':
'application/json'
},
success:
function (res) {
// 回调函数
console.log(res);
for (
var i =
0; i < res.data.data.data.length; i++) {
that.data.list.push(res.data.data.data[i]);
}
// 设置数据
that.setData({
list: that.data.list
})
// 隐藏加载框
wx.hideLoading();
}
})
},
})
wxss:
body{
background-color:
#999;
}
.cont {
width:
100%;
text-align:
center;
}
.con_names{
font-size:
28
rpx;
color:
#868686;
}
image {
width:
144
rpx;
height:
137
rpx;
display:
block;
margin:
134
rpx
auto
24
rpx;
}
.writes{
width:
90%;
position:
absolute;
left:
30
rpx;
top:
75
rpx;
font-size:
35
rpx;
border-bottom:
1px
solid
#ECECEC;
}
.btn_class{
margin-bottom:
20
rpx;
position:
relative;
text-align:
center;
background-color:
#fff;
width:
100%;
height:
250
rpx;
}
/*订单类型 */
.order_base{
position:
absolute;
left:
30
rpx;
top:
20
rpx;
font-size:
30
rpx;
color:
#2a2a2a;
}
.text_daiban{
font-size:
30
rpx;
color:
#896A0D;
}
.ban{
position:
absolute;
right:
50
rpx;
top:
20
rpx;
font-size:
30
rpx;
color:
#9CDEC5;
}
.bans{
position:
absolute;
right:
50
rpx;
top:
20
rpx;
font-size:
30
rpx;
color:
#A8A8A8;
}
/*下单时间 */
.dates{
position:
absolute;
left:
30
rpx;
top:
90
rpx;
font-size:
30
rpx;
color:
#2a2a2a;
}
/*车型信息 */
.car_base{
position:
absolute;
left:
30
rpx;
top:
140
rpx;
color:
#2a2a2a;
display:
block;
font-size:
30
rpx;
}
.inp_text{
position:
absolute;
left:
150
rpx;
top:
0
rpx;
display:
block;
/* background-color: red; */
text-align:
left;
width:
500
rpx;
white-space:
nowrap;
word-break:
break-all;
-webkit-box-orient:
vertical;
-webkit-line-clamp:
1;
overflow:
hidden;
text-overflow:
ellipsis;
font-size:
30
rpx;
color:
#2a2a2a;
}
/*消费金额 */
.money{
position:
absolute;
left:
30
rpx;
top:
190
rpx;
color:
#2a2a2a;
font-size:
30
rpx;
}