jquery - MUI 中使用 ajax下拉刷新时,数据怎么才能做到累加呢,谢谢
本文介绍了jquery - MUI 中使用 ajax下拉刷新时,数据怎么才能做到累加呢,谢谢的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
第一次加载10条成功,我在执行下拉刷新时,怎么让查询到的数据累加呢?下面是我的代码:
html:
mui.init({
pullRefresh: {
container: '#pullrefresh',
down: {
callback: pulldownRefresh
}
}
});
function pulldownRefresh() {
var page = 1;
var size = 10;
/*第一次加载时取得所有的li*/
var table = jQuery('.mui-table-view');
var cells = table.find('.mui-table-view-cell');
var newCells = {};
var url = MyAnviz.baseUrl + '/product/ajax/productlist.html';
//查询参数,因为是假数据,因此这个对象没有作为查询参数使用
var dataEntity = {
"userId": "1",
"page": page,
"size": size
};
//刷新加载,更改page
dataEntity.page = parseInt(dataEntity.page) + 1;
console.log('page:' + dataEntity.page);
mui.ajax({
type: "GET",
url: url,
data: dataEntity,
dataType: "json",
success: function (data) {
console.log('data' + data.data);
for (var i = 0; i < data.data.length; i++) {
var item = data.data[i];
if(item){
var p_id = item.contentId;
var p_img = item.productorImg;
var p_name = item.productorName;
var p_des = item.productorDes;
var p_url = item.productorUrl;
}
/*新的 数组列表*/
var li = jQuery('<li class="mui-table-view-cell mui-media js-media" data-id="' + p_id + '">' + '<img class="mui-media-object mui-pull-left js-img" src="' + p_img + '" /><div class="mui-media-body js-media-body">' + p_name + '</div>' + '<div class="anviz-ellipsis js-des js-info">' + p_des + '</div></li>');
/*改变cells的length*/
console.log('新的li为:' + li.length);
/*新的li数组添加到第一次加载的10条li的后面*/
/*执行到这一步时报错,原来的数据会被替换掉,这里要怎么改?cells返回的是"[object Object]11",看最后面的11应该是push进一条数据,但是这样的数据会报错*/
cells += cells.push(li);
/*将第二次刷新的数据一起append到table中*/
table.append(cells);
}
table.last().addClass('anviz-media');
mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
if (mui.os.plus) {
mui.plusReady(function() {
setTimeout(function() {
mui('#pullrefresh').pullRefresh().pullupLoading();
}, 1000);
});
} else {
mui.ready(function() {
mui('#pullrefresh').pullRefresh().pullupLoading();
});
}
},
error: function (data) {
mui.alert('Error 500--Internal Server Error!');
}
})
}
解决方案
下面是答案,整个粘贴:
<script type="text/javascript" charset="utf-8">
mui.init({
pullRefresh: {
container: '#pullrefresh',
down: {
callback: pulldownRefresh
}
}
});
function pulldownRefresh() {
var page = 1;
var size = 10;
/*第一次加载时取得所有的li*/
var table = jQuery('.mui-table-view');
var cells = table.find('.mui-table-view-cell');
var newCells = {};
var url = MyAnviz.baseUrl + '/product/ajax/productlist.html';
//查询参数,因为是假数据,因此这个对象没有作为查询参数使用
var dataEntity = {
"userId": "1",
"page": page,
"size": size
};
//刷新加载,更改page
dataEntity.page = parseInt(dataEntity.page) + 1;
console.log('page:' + dataEntity.page);
mui.ajax({
type: "GET",
url: url,
data: dataEntity,
dataType: "json",
success: function (data) {
console.log('data' + data.data);
for (var i = 0; i < data.data.length; i++) {
var item = data.data[i];
if(item){
var p_id = item.contentId;
var p_img = item.productorImg;
var p_name = item.productorName;
var p_des = item.productorDes;
var p_url = item.productorUrl;
}
/*新的 数组列表*/
var li = jQuery('<li class="mui-table-view-cell mui-media js-media" data-id="' + p_id + '">' + '<img class="mui-media-object mui-pull-left js-img" src="' + p_img + '" /><div class="mui-media-body js-media-body">' + p_name + '</div>' + '<div class="anviz-ellipsis js-des js-info">' + p_des + '</div></li>');
/*改变cells的length*/
console.log('新的li为:' + li.length);
/*新的li数组添加到第一次加载的10条li的后面,这里怎么搞*/
cells.push(li[0]);
console.log('新的li数量' + cells.length);
table.append(cells);
}
table.last().addClass('anviz-media');
mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
},
error: function (data) {
}
})
</script>
这篇关于jquery - MUI 中使用 ajax下拉刷新时,数据怎么才能做到累加呢,谢谢的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文