mui.init({
pullRefresh: {
container: '#pullrefresh',
down: {//下拉刷新
auto:true,//可选,默认false.自动下拉刷新一次
contentdown : "下拉可以刷新",//可选,在下拉可刷新状态时,下拉刷新控件上显示的标题内容
contentover : "释放立即刷新",//可选,在释放可刷新状态时,下拉刷新控件上显示的标题内容
contentrefresh : "正在刷新...",//可选,正在刷新状态时,下拉刷新控件上显示的标题内容
contentnomore:'暂无数据',//可选,请求完毕若没有更多数据时显示的提醒内容;
callback: pulldownRefresh
},
up: {//上拉加载
auto:true,//可选,默认false.自动上拉加载一次
contentrefresh: '正在加载...',
contentnomore:'没有更多数据了',//可选,请求完毕若没有更多数据时显示的提醒内容;
callback: pullupRefresh
}
}
});
// 下拉刷新具体业务实现
function pulldownRefresh() {
setTimeout(function() {
pageNow = 1;//刷新并显示第一页
type=1;//代表下拉刷新
showLsit(pageNow,type);//具体取数据的方法
}, 100);
}
// 上拉加载具体业务实现
function pullupRefresh() {
setTimeout(function() {
pageNow++;//翻下一页
type=2;//代表上拉加载
showLsit(pageNow,type);//具体取数据的方法
}, 100);
}
function showLsit(pageNow,type) {
var url = G_URL_MERCH_GETLIST;
var search = $("#search").val(); // 搜索框的内容
jQuery.ajax({
url: url,
type: "post",
data: {"userId" : G_VAR_USERID, "accessToken" : G_VAR_ACCESSTOKEN,"search":search,"pageNow":pageNow,"pageSize":pageSize},
dataType: "json",
async: false,
success: function (result) {
if (result.errcode == "0") {
var listUL = $(".mui-table-view");
if (result.list != null && result.list.length > 0) {
if(pageNow == 1){
listUL.html(""); // 清空已经加载的数据
}
for (var int = 0; int < result.list.length; int++) {
var index = 1;
var merchProd = result.list[int]; // 产品对象
var basMerch = merchProd.basMerch; // 商户对象
// 品牌图片
var prodPhoto = merchProd.prodPhoto == null || merchProd.prodPhoto == "" ? "images/noload.png" : merchProd.prodPhoto;
var url = "merchProdDetail.html?reqUserId="+G_VAR_USERID+"&accessToken="+G_VAR_ACCESSTOKEN+"&reqUserName="+G_VAR_USERNAME+"&bizId="+merchProd.bizId;
listUL.append(' <li class="mui-table-view-cell czl-table-view-cell mui-media" id="'+merchProd.bizId+'" > ');
listUL.append(' <a class="alink" href="javascript:void(0);" title="'+merchProd.prodName+'" id="'+merchProd.bizId+'" bizId="'+merchProd.bizId+'" onclick="detailLink(this)" > ');
listUL.append(' <img class="mui-media-object czl-media-object mui-pull-left" src="'+prodPhoto+'" width="100" bizId="'+merchProd.bizId+'" > ');
listUL.append(' <div class="mui-media-body"> ');
listUL.append(' <div class="brand">'+merchProd.prodName+'</div> ');
listUL.append(' <div class="subTitle">'+basMerch.orgName+'</div> ');
if(basMerch.orgAddr != null && basMerch.orgAddr != ""){
listUL.append(' <div class="subTitle">地址:'+basMerch.orgAddr+'</div> ');
index ++;
}
if(basMerch.orgTel != null && basMerch.orgTel != "" ){
listUL.append(' <div class="subTitle">电话:'+basMerch.orgTel+'</div> ');
index ++;
}
if(basMerch.orgFax != null && basMerch.orgFax != ""){
listUL.append(' <div class="subTitle">传真:'+basMerch.orgFax+'</div> ');
index ++;
}
if(basMerch.orgEmail != null && basMerch.orgEmail != "" && index < 4){
listUL.append(' <div class="subTitle">邮箱:'+basMerch.orgEmail+'</div> ');
}
listUL.append(' </div></a></li> ');
}
}else{
if(pageNow == 1){
listUL.html(""); // 清空已经加载的数据
}
listUL.append(' <li class="mui-table-view-cell czl-table-view-cell mui-media"> ');
listUL.append(' <div class="mui-media-body"><p class="subTitle">暂无数据!</p></div> ');
listUL.append(' </li> ');
}
count = result.count;
mui('#pullrefresh').pullRefresh().endPulldownToRefresh();//结束下拉刷新
if(type==1){//上拉刷新
/*下面这句很关键!*/
mui('#pullrefresh').pullRefresh().refresh(true);//有重新触发上拉加载的需求(比如当前类别已无更多数据,但切换到另外一个类别后,应支持继续上拉加载)
}
// 结束上拉加载,并根据情况切换“下拉显示更多数据”,以及“没有更多数据了”。执行endPullupToRefresh()方法,
// 结束转雪花进度条的“正在加载...”过程,若还有更多数据,则传入false; 否则传入true,之后滚动条滚动到底时
if( pageNow >= result.totalPage){
mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
} else {
mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);
}
}else{
//获取异常
mui.toast('获取异常,请稍候再试');
mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
}
},
error: function (returndata) {
//获取异常
mui.toast('网络异常,请稍候再试');
mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
}
});
}
function detailLink(obj){
var bizId = $(obj).attr("bizId");
var url = "merchProdDetail.html?reqUserId="+G_VAR_USERID+"&accessToken="+G_VAR_ACCESSTOKEN+"&reqUserName="+G_VAR_USERNAME+"&bizId="+bizId;
mui.openWindow({
id: "merchProdDetail",
url: encodeURI(url),
waiting:{
autoShow:true,//自动显示等待框,默认为true
title:'正在加载...',//等待对话框上显示的提示内容
}
});
}
页面
<div id="pullrefresh" class="mui-content mui-scroll-wrapper" >
<div class="mui-scroll">
<ul class="mui-table-view czl-table-view">
<!-- 数据内容 -->
</ul>
</div>
</div>
mui(".mui-table-view").on('tap','.mui-table-view-cell',function(){
//获取id
var id = this.getAttribute("id");
var url = "merchProdDetail.html?reqUserId="+G_VAR_USERID+"&accessToken="+G_VAR_ACCESSTOKEN+"&reqUserName="+G_VAR_USERNAME+"&bizId="+id;
//传值给详情页面,通知加载新数据
mui.fire(url,'bizId',{id:id});
//打开新闻详情
mui.openWindow({
id:'detail',
url:url
});
})
大象只为你 (作者)
你好,谢谢你的回复,我后面终于知道怎么处理了,js append的问题,修改成 html拼接,然后再给赋值就可以了,我也是想不通为什么,应该是我前面listUL.html(""); // 清空已经加载的数据 这个,后面都只能用listUL.html(html字符串)
2016-12-22 22:26