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

小胡同志0526

已于 2024-09-05 11:22:22 修改

阅读量1.9k

点赞数 1

分类专栏：前端日常笔记文章标签：小程序分页

于 2018-02-02 13:29:48 首次发布

本文链接：https://blog.csdn.net/sinat_35656188/article/details/79237967

版权

前端日常笔记专栏收录该内容

43 篇文章 0 订阅

订阅专栏

一、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"
});
}
}
});
}