mui 上拉刷新下拉加载 pullToRefresh
程序员文章站
2024-03-17 11:11:22
...
/**
* 分页
*/
function pagination() {
mui('.mui-scroll-wrapper').scroll({
indicators: true
}); //初始化scroll组件
// 刷新组件对象 // 处理中
var pullToRefresh = mui('#refresh_container').pullToRefresh({
down: {
auto: true,
callback: function() {
pageNum = 1; //重置页码
var _self = this;
var ul = _self.element.querySelector('.pullQuestion');
load_keywork_data(pageNum, pageSize, ul, 0);
setTimeout(function() {
_self.endPullDownToRefresh();
}, 1000);
}
},
up: {
auto: true, //默认执行一次上拉加载
contentinit: '上拉加载更多信息',
contentdown: '上拉加载结束',
contentrefresh: '正在加载信息请稍等',
contentnomore: '没有更多数据',
callback: function() {
pageNum += 1; //页码加1
var _self = this;
var ul = _self.element.querySelector('.pullQuestion');
load_keywork_data(pageNum, pageSize, ul, 1);
setTimeout(function() {
_self.endPullUpToRefresh(pageNum === totalPage); //最后一页加载完成后禁用上拉
}, 1000);
}
}
});
}
function load_keywork_data(p_pageNum, p_pageSize, p_ul, key) {
var userId = plus.storage.getItem("USERID");
var dataForm = {
'userId': userId,
'rows': p_pageSize,
'page': p_pageNum,
'month_': monthDate,
'sort': 'updatetime',
'order': 'desc'
}
console.log("dataForm:" + JSON.stringify(dataForm));
fhAjaxSynch("接口", dataForm, "post", 10000, function(_json) {
if(_json.status == "error") {
mui.toast(_json.message);
return;
} else {
var jsonData = JSON.parse(_json.data);
var html = "";
if(jsonData.rows.length == 0) {
if(p_pageNum == 1) {
document.getElementById("segmented").style.display = "none";
document.getElementById("noDataId").style.display = "";
}
} else {
document.getElementById("segmented").style.display = "";
document.getElementById("noDataId").style.display = "none";
var totalRows = jsonData.total;
if(totalRows % p_pageSize === 0) {
totalPage = totalRows / p_pageSize;
} else {
totalPage = parseInt(totalRows / p_pageSize) + 1;
}
var data = jsonData.rows;
html = int_keywork_hmtl(data);
if(key == 0) {
p_ul.innerHTML = html;
} else {
p_ul.innerHTML += html;
}
}
}
});
}
添加筛选条件重新获取数据
//添加searchData自定义事件监听
window.addEventListener('searchData', function(event) {
//获得事件参数
monthDate = event.detail.formData;
pageNum = 1;
var ul = document.getElementById("keyWorkList");
load_keywork_data(pageNum, pageSize, ul, 0);
setTimeout(function() {
mui('#refresh_container').pullToRefresh().endPullUpToRefresh(pageNum === totalPage); //最后一页加载完成后禁用上拉
}, 1000);
});
上一篇: 原生 JS 实现轮播图
推荐阅读
-
mui 上拉刷新下拉加载 pullToRefresh
-
3年以上勿进!最简单的Android自定义ListView下拉刷新与上拉加载,代码直接拿去用~
-
Android RecyclerView 上拉加载更多及下拉刷新功能的实现方法
-
Android使用PullToRefresh实现上拉加载和下拉刷新效果的代码
-
Android RecyclerView 上拉加载更多及下拉刷新功能的实现方法
-
Android程序开发之使用PullToRefresh实现下拉刷新和上拉加载
-
Qt qml中listview 列表视图控件(下拉刷新、上拉分页、滚动轴)
-
Android程序开发之Listview下拉刷新上拉(滑动分页)加载更多
-
Android ListView下拉刷新上拉自动加载更多DEMO示例
-
Android开发ListView中下拉刷新上拉加载及带列的横向滚动实现方法