现在大部分APP都会有上拉加载和下拉刷新功能,加载数据,分页渲染到页面上。MUI实现起来也是非常简单的。
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>单 webview 模式</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/mui.min.css">
<style type="text/css">
.mui-navigate-right{
color: #DEB887;
font-size: 14px;
}
span{
font-size: 14px;
color: #BC8F8F;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">单 webview 模式</h1>
</header>
<div class="mui-content">
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!--数据列表-->
<ul class="mui-table-view mui-table-view-chevron"></ul>
</div>
</div>
</div>
Javascript:
<script src="js/jquery.min.js"></script>
<script src="js/mui.min.js"></script>
<script src="js/fefresh.js"></script>
<script>
mui.init({
pullRefresh: {
container: '#pullrefresh',//下拉刷新容器标识,css选择器均可
down: {
style:'circle',//下拉刷新样式,目前支持原生5+ ‘circle’ 样式
color:'#FFB6C1',//默认“#2BD009” 下拉刷新控件颜色
callback: pulldownRefresh//刷新函数,比如通过ajax从服务器获取新数据
},
up: {
auto:true,//首次加载自动上拉加载一次
contentrefresh: '快乐的加载中...',//正在加载状态时,控件上显示的标题内容
contentnomore:'没有更多的数据啦',//请求完毕若没有更多数据时显示的提醒内容
callback: pullupRefresh//刷新函数,比如通过ajax从服务器获取新数据
}
}
});
/**
* 上拉显示更多
*/
var count = 0;//次数(++小于↓总页码)
var currentPage = 1;//当前页(++)
var totalPageNum=1;//总页码(return)
function pullupRefresh() {
setTimeout(function() {
//参数为true代表没有更多数据啦
mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > totalPageNum));
var table = document.body.querySelector('.mui-table-view');
/**
* Send Ajax
*/
var data= {
'page':currentPage
}
var url = '/orange/user/moneystream';
mui.ajax({
url,
data:data,
dataType: 'json',
contentType: "application/json",
type: 'post',
headers: {
'Content-Type': 'application/json'
},
success: function(data) {
if (data.code == 0) {
if (data.result.moneystream.length > 0) {
//总条数
totalPageNum=data.result.totalPageNum;
for (var i = 0; i < data.result.moneystream.length; i++) {
var day=data.result.moneystream[i].writetime;
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '\
<li>\
<a class="mui-navigate-right">\
$:' + (data.result.moneystream[i].money) + '.00\
</a>\
<br/><span>'+day+'</span>\
</li>';
table.appendChild(li);
}
currentPage++;
}
} else {
mui.toast(data.msg);
}
},
headers: {
'Access-Control-Allow-Headers': 'X-Requested-With'
}
});
}, 600);
}
/**
* 下拉刷新
*/
function pulldownRefresh() {
//直接页面刷新,偷懒哈哈
window.location.reload();
mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
}
//重置上拉加载
//mui('#pullup-container').pullRefresh().refresh(true);
//禁用上拉刷新
// mui('#pullup-container').pullRefresh().disablePullupToRefresh();
//启用上拉刷新
//mui('#pullup-container').pullRefresh().enablePullupToRefresh();
//页面禁用下拉刷新动作
// mui.plusReady(function() {
// plus.webview.currentWebview().setPullToRefresh({support:false});
// });
</script>
</body>
</html>
其他页面禁用下拉刷新
<script type="text/javascript">
mui.init()
mui.plusReady(function() {
plus.webview.currentWebview().setPullToRefresh({support:false});
});
</script>
JAVA:
int limit = StringUtils.isEmpty(json.getString("limit")) ? 15 :
Integer.parseInt(json.getString("limit"));
int page = StringUtils.isEmpty(json.getString("page")) ? 1 :
Integer.parseInt(json.getString("page"));
/**
* 分页查询,上拉显示更多
* 传过来当前页,返回分页参数对象
*/
Page<MoneyStreamEntity>pageList=MoneyStreamService.selectPage(new Page<>(page,limit),
new EntityWrapper<MoneyStreamEntity>().orderBy("time").last("desc"));
List<MoneyStreamEntity>list=pageList.getRecords();
int total=pageList.getTotal();
int totalPageNum = (total + limit - 1) / limit;
resObj.put("moneystream", list);
resObj.put("totalPageNum", totalPageNum-1);
学习视频链接:https://blog.csdn.net/weixin_38407595/article/details/102561868