小程序之下拉刷新和上拉加载

一、wxml

<view
class="weui-loadmore weui-loadmore_line"
hidden="{{!searchLoading}}">
<view
class="weui-loadmore__tips weui-loadmore__tips_in-line">正在加载<view
class="weui-loading"></view></view>

</view>
<view
class="weui-loadmore weui-loadmore_line"
hidden="{{!searchLoadingComplete}}">
<view
class="weui-loadmore__tips weui-loadmore__tips_in-line">已加载全部</view>
</view>
<view
class="weui-loadmore weui-loadmore_line"
hidden="{{!isHideLoadMore}}">
<view
class="weui-loadmore__tips weui-loadmore__tips_in-line">上拉获取更多</view>
</view>
<view
class="weui-loadmore weui-loadmore_line"
hidden="{{!isNoData}}">
<view
class="weui-loadmore__tips weui-loadmore__tips_in-line">暂无数据</view>
</view>

二、js

var app = getApp();
var PageCount =
0;//总页数
var PageIndex =
1;//当前页码
var PageSize =
10;//每页容量
var Data_List = [];

data: {
searchLoading: false,
//"正在加载"的变量，默认false，隐藏
searchLoadingComplete: false,
//“全部加载完成”的变量，默认false，隐藏
isHideLoadMore: false,//"上拉加载更多"的变量，默认false，隐藏

isNoData: false,//没有数据变量
DataList:[]
},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
wx.showToast({
title: '正在加载...',
icon: 'loading',
duration: 1000
});
PageCount = 0;//总页数
PageIndex = 1;//当前页码
PageSize = 8;//每页容量
Data_List = [];
Load(this);
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
PageCount = 0;//总页数
PageIndex = 1;//当前页码
PageSize = 10;//每页容量
Data_List = [];
wx.showNavigationBarLoading(); //在标题栏中显示加载
Load(this);
setTimeout(function (e) {
wx.hideNavigationBarLoading(); //完成停止加载
wx.stopPullDownRefresh(); //停止下拉刷新
}, 1500);
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
var that =
this;
PageIndex = PageIndex + 1;
if (PageIndex <= PageCount) {
// if 有更多 加载 并且隐藏加载更多
that.setData({
searchLoading: true,<
b752
/span>
isHideLoadMore: false,
searchLoadingComplete: false,
isNoData: false
});
wx.showToast({
title: '正在加载...',
icon: 'loading',
duration: 2000,
success: function (e) {
setTimeout(function () {
Load(that);
}, 2000);
}
});
} else {
//if 没有更多 显示已加载全部
that.setData({
searchLoading: false,
searchLoadingComplete: true,
isHideLoadMore: false,
isNoData: false
});
}
},

function renderTime(date) {
var da = date.replace("T",
" ");
return da;
}
function Load(e) {
var that = e;
var param = {
action: "HistoryPatrolTaskList",
PageIndex: PageIndex,
PageSize: PageSize,
StaffID: wx.getStorageSync('StaffID')
};
wx.request({
method: 'GET',
dataType: "json",
header: {
'content-type':
'application/json'
// 默认值
},
data: param,
url: app.data.https,
success: function (res) {
console.log(res.data);
if (res.data.Status >
0) {
PageCount = res.data.PageCount;//总页数
if (res.data.TotalCount ==
0) {//如果没有数据
that.setData({
searchLoadingComplete: true,
isHideLoadMore: false,
searchLoading: false
});
} else {//有数据
if (PageCount ==
1){//只有一页
that.setData({
searchLoadingComplete: true,
isHideLoadMore: false,
searchLoading: false,
isNoData: false
});
}else{//如果不止一页
that.setData({
searchLoadingComplete: false,
isHideLoadMore: true,
searchLoading: false,
isNoData: false
});
}
}
var items = res.data.Data;
for (var i =
0; i < items.length; i++) {
items[i].AddTime = renderTime(items[i].AddTime);
Data_List.push(items[i]);
}
that.setData({
DataList:Data_List
});
} else {
wx.showModal({
title: '提示',
content: res.data.SuccessStr,
showCancel: false,
confirmColor: "#1C78FF"
});
}
}
});

}

三、json

"enablePullDownRefresh":
true

四、效果图