功能:
MUI 下拉刷新 结合AJAX 实现网络交互,动态添加元素并追加相应的tap事件
ps:MUI 下拉刷新控件滑动部分是完整的webview(子webview)。所以需要在父webView中创建一个单独的webview。
模块:
pullrefresh.html: 下拉刷新父webview
pullrefersh_child.html :下拉刷新子webview
pullrefresh.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/mui.css" />
<title>下拉刷新</title>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white;"><font size="4">返回</font></a>
<h1 class="mui-title">下拉刷新</h1>
</header>
<div class="mui-content"></div>
</body>
<script src="js/mui.js"></script>
<script>
mui.init({
subpages: [{
url: 'pullrefersh_child.html',
id: 'pullrefersh_child',
styles: {
top: '45px',
bottom: '0px',
}
}]
});
</script>
</html>
pullrefersh_child.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/mui.css" />
<link rel="stylesheet" href="../css/mui.min.css">
</head>
<body>
<!--下拉刷新容器-->
<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!--数据列表-->
<ul class="mui-table-view mui-table-view-chevron">
</ul>
</div>
</div>
<script src="js/mui.js"></script>
<script>
mui.init({
pullRefresh: {
container: '#refreshContainer',
down: {
contentdown: '下拉刷新哦',
contentover: '释放即可刷新哦',
contentrefresh: '正在刷新哦',
callback: pulldownrefresh
},
up: {
contentrefresh: '正在刷新哦',
callback: pulluprefresh
}
}
});
// down
indexsub = 0;
var dataAllArray = new Array();
/*
* 下拉刷新
* */
function pulldownrefresh() {
indexsub++;
var urls = "http://192.168.1.1:8080/tt/login";
var jsondata = {
name: '张三',
pwd: '123456',
index: indexsub
};
params = JSON.stringify(jsondata);
console.log('params = ' + params);
mui.ajax(urls, {
data: params,
type: 'POST',
timeout: 10000,
success: function(data) {
plus.nativeUI.closeWaiting();
var obj = JSON.parse(data);
rescode = obj.resCode;
console.log('rescode = ' + rescode);
if (rescode == 200) {
var response = obj.resPonse;
if (response.length <= 0) {
plus.nativeUI.toast('哎呀,没有更多数据了');
mui('.mui-table-view').pullRefresh().endPulldownToRefresh();
return;
}
tableview = document.body.querySelector('.mui-table-view');
// 全局数组中追加新数据,目的设置item的tap事件可以根据 id从 全局数组中查找对应的object
for (var i = 0; i < response.length; i++) {
dataAllArray.push(response[i]);
}
// 查询当前子元素个数 (class:mui-table-view-cell)
cellindex = document.body.querySelectorAll('.mui-table-view-cell');
for (var k = cellindex.length; k < dataAllArray.length; k++) {
// 绘制li元素
//******************************模版一(简单li)*************************
// li_ = document.createElement('li');
// li_.id = k;
// li_.className = 'mui-table-view-cell';
// li_.innerText = dataAllArray[k].name;
// if (cellindex.length != 0) {
// tableview.insertBefore(li_, tableview.firstChild);
// } else {
// tableview.appendChild(li_);
// }
//******************************模版二(带图片li)*************************
var li_ = document.createElement('li');
li_.className = "mui-table-view-cell mui-media";
li_.id = k;
var a_ = document.createElement('a');
a_.href = "#";
//a_.id = i;
var img_ = document.createElement('img');
img_.className = 'mui-media-object mui-pull-left';
img_.src = 'images/cbd.jpg';
var div_ = document.createElement('div');
div_.className = 'mui-media-body';
div_.innerText = dataAllArray[k].name;
var p_ = document.createElement('p');
p_.className = 'mui-ellipsis';
p_.innerText = '能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?';
div_.appendChild(p_);
a_.appendChild(img_);
a_.appendChild(div_);
li_.appendChild(a_);
if (cellindex.length != 0) {
tableview.insertBefore(li_, tableview.firstChild);
} else {
tableview.appendChild(li_);
}
}
mui('.mui-table-view').pullRefresh().endPulldownToRefresh();
} else {
rescontent = obj.resStr;
alert("error:" + rescode + "\nmsg:" + rescontent);
}
},
error: function(code, type, msg) {
alert("error:" + code + "\ntype = " + type + "\nmsg:" + msg);
}
});
}
/**
* 上滑加载更多
*/
function pulluprefresh() {
indexsub++;
var urls = <a target=_blank href="http://192.168.1.1:8080/tt/login">http://192.168.1.1:8080/tt/login</a>;
var jsondata = {
name: '张三',
pwd: '123456',
index: indexsub
};
params = JSON.stringify(jsondata);
console.log('params = ' + params);
mui.ajax(urls, {
data: params,
type: 'POST',
timeout: 10000,
success: function(data) {
plus.nativeUI.closeWaiting();
var obj = JSON.parse(data);
rescode = obj.resCode;
console.log('rescode = ' + rescode);
if (rescode == 200) {
var response = obj.resPonse;
tableview = document.body.querySelector('.mui-table-view');
if (response.length <= 0) {
mui('#refreshContainer').pullRefresh().endPullupToRefresh(true); // true 表示 没有更多数据
} else {
for (var i = 0; i < response.length; i++) {
dataAllArray.push(response[i]);
}
// 查询当前子元素个数 (class:mui-table-view-cell)
cellindex = document.body.querySelectorAll('.mui-table-view-cell');
for (var k = cellindex.length; k < dataAllArray.length; k++) {
//******************************模版一(简单li)*************************
// li_ = document.createElement('li');
// li_.id = k;
// li_.className = 'mui-table-view-cell';
// li_.innerText = dataAllArray[k].name;
//******************************模版二(带图片li)*************************
var li_ = document.createElement('li');
li_.className = "mui-table-view-cell mui-media";
li_.id = k;
var a_ = document.createElement('a');
a_.href = "#";
//a_.id = i;
var img_ = document.createElement('img');
img_.className = 'mui-media-object mui-pull-left';
img_.src = 'images/cbd.jpg';
var div_ = document.createElement('div');
div_.className = 'mui-media-body';
div_.innerText = dataAllArray[k].name;
var p_ = document.createElement('p');
p_.className = 'mui-ellipsis';
p_.innerText = '能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?';
div_.appendChild(p_);
a_.appendChild(img_);
a_.appendChild(div_);
li_.appendChild(a_);
tableview.appendChild(li_);
}
mui('#refreshContainer').pullRefresh().endPullupToRefresh(false); // true 表示 没有更多数据
}
} else {
rescontent = obj.resStr;
alert("error:" + rescode + "\nmsg:" + rescontent);
}
},
error: function(code, type, msg) {
alert("error:" + code + "\ntype = " + type + "\nmsg:" + msg);
}
});
}
// item 点击事件
mui('.mui-table-view').on('tap', 'li', function() {
id = this.getAttribute('id');
obj = dataAllArray[id];
alert('name = ' + obj.name + "\npwd = " + obj.pwd + "\nage = " + obj.age);
});
</script>
</body>
</html>
服务端(接收mui.ajax的post请求,并做出响应)
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
String requets = IOUtils.toString(req.getInputStream(), "utf-8");
System.out.println("requets = " + requets);
Gson mGson = new Gson();
UserVo muser = mGson.fromJson(requets, UserVo.class);
System.out.println("getIndex = " + muser.getIndex());
int index = Integer.parseInt(muser.getIndex());
JSONObject mJsonObject = new JSONObject();
mJsonObject.put("resCode", "200");
mJsonObject.put("resStr", "请求成功");
JSONArray mArray = new JSONArray();
if (index == 1) {
count = 1;
}
if (index > 3) {
} else {
for (int i = 0; i < 5; i++) {
JSONObject mJsonObjects = new JSONObject();
mJsonObjects.put("name", "张三" + count);
mJsonObjects.put("pwd", "123456" + count);
mJsonObjects.put("age", "20" + count);
mArray.add(mJsonObjects);
count++;
}
}
mJsonObject.put("resPonse", mArray);
OutputStream out = resp.getOutputStream();
out.write(mJsonObject.toString().getBytes("UTF-8"));
out.close();
}
效果图