花了2天时间对iscroll进行了一些封装，方便进行ajax读取数据和显示
1、IScroll直接使用的话还是挺麻烦的，特别是牵涉到分页加载动态加载数据时，以下是核心实现代码。
2、Loading提示，和空数据提示样式，由于篇幅限制不再粘贴，大家可以自己完善。
3、版本是IScroll5
var UseIScrollHelper = {
myScroll: null, //iScroll对象
scrollId: 'divscroll',//默认scrollid
wrapperId: 'wrapper',//默认wrapperid
fillList: null, //对应的回调函数
isMore: false, //是否可刷新标记
isNoData: false, //是否无数据
isLoading: false,//是否加载数据中
isUsePage: true, //是否使用分页
headAndBottomHeight:0, //顶部预留高度
pageIndex: 1,
pageSize: 10,
url: '',
datas: '',
//显示空文本提示
checkIsScrollEmptyAndTiShi: function () {
if ($("#" + this.scrollId).html().trim() === "") {
this.isNoData = true;
this.showEmptyTiShi("#" + this.scrollId, "暂无数据");
$("#" + this.scrollId).css("min-height", "0px");
$("#" + this.scrollId).height("");
}
},
//空列表时显示提示信息
showEmptyTiShi: function (target, description) {
try {
var tishi = "<div>无数据</div>";
$(target).html(tishi);
}
catch (e) { alert(e); }
},
//设置ScrollHeight
setScrollHeight: function () {
var temp_height = 0;
temp_height = $("#"+this.wrapperId).height();
try {
var showHeight = (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight) - this.headAndBottomHeight;
if (temp_height !== showHeight)
temp_height = showHeight;
}
catch (e) { ; };
$("#" + this.wrapperId).height(temp_height);
if (!this.isNoData)//有数据
{
$("#" + this.scrollId).css("min-height", temp_height + 1);
$("#" + this.scrollId).height("");
} else {//无数据
$("#" + this.scrollId).css("min-height", 0);
$("#" + this.scrollId).height("");
}
if (this.myScroll === undefined || this.myScroll === null) this.loadSroll();
else this.myScroll.refresh();
},
//清空数据
clearData: function () {
$("#" + this.scrollId).html("");
$("#" + this.scrollId).css("min-height", 0);
$("#" + this.scrollId).height("");
if (this.myScroll === undefined || this.myScroll === null) this.loadSroll();
else this.myScroll.refresh();
},
//加载Iscroll
loadSroll: function () {
setTimeout(function (obj) {
obj.myScroll = new IScroll("#" + obj.wrapperId, { click: true });
obj.myScroll.on('scrollStart', function () {
document.activeElement.blur();
});
obj.myScroll.on('scrollEnd', function () {
if (obj.isMore === false) {
obj.setScrollHeight();
return;
}
if (this.y <= this.maxScrollY) {
if (obj.isMore === false) {
obj.setScrollHeight();
this.refresh();
return;
}
if (obj.getData !== null) {
obj.getData();
}
this.refresh();
} else {
this.refresh();
}
});
}, 100,this);
},
//从服务端读数据
getData: function () {
try {
if (this.isLoading) return;
if (this.isNoData) return;
this.isLoading = true;
var obj = this;
var url = this.url;
//有分页标志才启用分页参数
if (this.isUsePage) {
url = url + "&pageIndex=" + this.pageIndex + "&pageSize=" + this.pageSize;
}
$.ajax({
url: url,
type: "post",
dataType: "json",
data: this.datas,
success: function (p_datas) {
bhttooler.nologinDeal(p_datas);
if (p_datas[0].result === "success") {
if (obj.fillList !== null)
obj.fillList(p_datas[0].datas);
if (obj.isUsePage) {//有分页标志进行判断
if (p_datas[0].isMore === "True") {
obj.pageIndex = obj.pageIndex + 1;
obj.isMore = true;
} else {
obj.isMore = false;
}
}
}
obj.checkIsScrollEmptyAndTiShi();
bhttooler.hideLoadding();
obj.setScrollHeight();
obj.isLoading = false;
},
fail: function () {
obj.checkIsScrollEmptyAndTiShi();
obj.setScrollHeight();
obj.isLoading = false;
}
});
}
catch (e) {
this.checkIsScrollEmptyAndTiShi();
this.setScrollHeight();
this.isLoading = false;
}
}
};
前台示例使用方法：
<div id="celltemplate" style="display:none">
<div class="weui-cells">
<a class="weui-cell weui-cell_access" href="#">
<div class="weui-cell__hd ">
#title#
</div>
</a>
</div>
</div>
<div class="page tabbar js_show">
<div class="page__bd" style="height: 100%;">
<div class="weui-tab">
<div class="weui-tab__panel" style="padding-bottom: 0px;">
<div id="wrapper" >
<div id="divscroll">
</div>
</div>
</div>
</div>
</div>
</div>
window.onload = function () {
mobanhtml = $('#celltemplate').html();
UseIScrollHelper.fillList = FillList;
UseIScrollHelper.url = "XXXXXXXXXXXXXXXX";
UseIScrollHelper.datas = "";
UseIScrollHelper.getData();
}
function FillList(listdata) {
for (var i = 0; i < listdata.length; i++) {
var datas = listdata[i];
var inserthtml = mobanhtml
.replace("#title#", datas.title)
$('#divscroll').append(inserthtml);
}
}
#wrapper {
overflow: hidden;
position:relative;
}
/*必须设置为absolute不然会遮挡一部分*/
#divscroll {
position: absolute;
width: 100%;
}
如果一个页面有多个IScroll，请使用以下代码生成实例
var renYuanScroller = Object.create(UseIScrollHelper);
后台返回数据代码（C#示例)。
string strJson = "\"datas\":" + Newtonsoft.Json.JsonConvert.SerializeObject(dtTemp, new Newtonsoft.Json.Converters.DataTableConverter());
string Json = "[{\"result\":\"success\",\"isMore\":\"" + isMore + "\"," + strJson + "}]";
Response.Write(Json);