小程序下拉加载更多
方法一
order.js
Page({
/**
* 页面的初始数据
*/
data: {
list: [], // 订单列表
scrollHeight: null, // 列表容器高度
no_more: false, // 没有更多数据
isLoading: true, // 是否正在加载中
page: 1, // 当前页码
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
let _this = this;
// 设置scroll-view高度
_this.setListHeight();
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
// 获取订单列表
this.getOrderList();
},
/**
* 获取订单列表
*/
getOrderList(isPage, page) {
let _this = this;
App._get('order/lists', {
page: page || 1
}, result => {
let resList = result.data.list,
dataList = _this.data.list;
if (isPage == true) {
_this.setData({
'list.data': dataList.data.concat(resList.data),
isLoading: false,
});
} else {
_this.setData({
list: resList,
isLoading: false,
});
}
});
},
onPullDownRefresh() {
wx.stopPullDownRefresh();
},
/**
* 下拉到底加载数据
*/
bindDownLoad() {
// 已经是最后一页
if (this.data.page >= this.data.list.last_page) {
this.setData({
no_more: true
});
return false;
}
// 加载下一页列表
this.getOrderList(true, ++this.data.page);
},
/**
* 设置商品列表高度
*/
setListHeight() {
let systemInfo = wx.getSystemInfoSync(),
rpx = systemInfo.windowWidth / 750, // 计算rpx
tapHeight = Math.floor(rpx * 88), // tap高度
scrollHeight = systemInfo.windowHeight - tapHeight; // swiper高度
this.setData({
scrollHeight
});
},
});
order.wxml
<!-- 订单列表 -->
<view class="goods-detail-box">
<scroll-view bindscrolltolower="bindDownLoad" scroll-y
style="height: px; width: 750rpx;margin-top:88rpx;">
<!-- 订单列表不为空 -->
<view class="wrapper" wx:if="">
</view>
<view wx:if="">
<view class="yoshop-notcont">
<text class="iconfont icon-wushuju"></text>
<text class="cont">亲,您还没有订单信息哦!</text>
</view>
</view>
<!-- 订单列表全部加载 -->
<view wx:if="" class="no-more f-30">亲, 没有更多了</view>
</scroll-view>
</view>
order.wxss
.goods-detail-box {
padding: 0;
min-height: 150px;
}
/* 没有更多 */
.no-more {
text-align: center;
color: #737373;
padding: 10px 0;
}
.notcont {
padding: 130rpx 100rpx;
box-sizing: border-box;
}
.notcont .cont {
display: block;
text-align: center;
font-size: 30rpx;
color: #999;
margin-top: 10rpx;
}
.notcont .iconfont {
font-size: 150rpx;
color: #ccc;
text-align: center;
display: block;
margin-bottom: 12rpx;
}
方法二
order.json
{
"navigationBarTitleText": "订单中心",
"enablePullDownRefresh": true
}
order.js
Page({
/**
* 页面的初始数据
*/
data: {
page:1,
lists:[],
},
onLoad: function (options) {
},
onShow: function () {
var _this = this;
_this.getOrderData();
},
/**
* 加载页面数据
*/
getOrderData: function () {
let _this = this;
App._get('User/orderlist', {}, function (result) {
_this.setData({
lists:result.data.list.data,
page:_this.data.page+1
})
});
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
let _this = this;
App._get('User/orderlist', {
page: 1,
}, function (result) {
_this.setData({
lists: result.data.list.data,
});
wx.stopPullDownRefresh();
wx.showToast({
title: '刷新成功',
icon: 'success',
duration: 1000
})
});
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
let _this = this;
let page = _this.data.page;
wx.showLoading({
title: '加载中...',
})
App._get('User/orderlist', {
page: page,
}, function (result) {
setTimeout(function () {
wx.hideLoading()
}, 500)
if (result.data.list.data.length > 0) {
var lists = _this.data.lists;
for (var i = 0; i < result.data.list.data.length; i++) {
lists.push(result.data[i]);
}
_this.setData({
lists: lists,
page: page + 1
});
} else {
setTimeout(function () {
wx.hideLoading()
}, 500)
wx.showToast({
title: '加载完毕',
icon: 'none',
duration: 3000
})
}
});
},
})
order.wxml
<view wx:if="" class="order-list">
</view>
<view wx:if="" class="order-list">
<view class="order-items">
<text class="list-no">暂无数据!</text>
</view>
</view>
order.wxss
.order-items {
position: relative;
background: #fff;
padding: 30rpx;
margin-bottom: 20rpx;
}
.list-no{
display: block;
font-size: 30rpx;
padding: 30rpx 0;
text-align: center;
}