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

一、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,

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

四、效果图