JS 手机端滑动分页插件 SPager 最新版

JS

/* SPager 调用说明 */
//第一步 建立 SPager对象 var spager = new SPager(4); 参数为 每页 item 个数 PageSize
//第二步 必须重写 SPager 的 ReturnParentElement 方法 ，返回 item 的父元素
//第三步 必须重写 SPager 的 ReturnGifUrl 方法 ，返回 加载动画gif图片路径
//第四步 必须重写 SPager 的 CreateChilds 方法 ，返回 item 数组, 参数为 PageIndex，PageSize
//第五步 调用 SPager 的 Start 方法
(function () {
window.SPager = function (PageSize) {
this.ParentElement = null ;
this.PageSize = PageSize;
this.PageIndex = 1;
this.loadgif = null;
this.img_loading_flag = false;
this.items = [];
this.ReturnParentElement = function () { };
this.ReturnGifUrl = function () { };
this.CreateChilds = function () { };
};
SPager.prototype = {
Start: function () {
this.loadimg();
this.ParentElement = this.ReturnParentElement();
this.AddEvent();
},
loadimg: function () {
var _this = this;
this.loadgif = new Image();
this.loadgif.onload = function(){
_this.img_loading_flag = true;
};
this.loadgif.src = this.ReturnGifUrl();
},
AppendAllChild: function () {
this.PageIndex++;
this.items = this.CreateChilds(this.PageIndex, this.PageSize);
if (this.items.length==0) {
return;
}
for (var i = 0; i < this.items.length; i++) {
this.ParentElement.appendChild(this.items[i]);
}
},
AddEvent: function () {
var _this = this;
var fun = function () {
if (document.body.scrollTop == document.body.scrollHeight - window.innerHeight) {
document.removeEventListener("touchmove", fun, false);
_this.AddLoading();
_this.AppendAllChild();
_this.RemoveLoading();
document.addEventListener("touchmove", fun, false);
}
};
document.addEventListener("touchmove", fun, false);
},
AddLoading: function () {
var loading = document.createElement("div");
loading.setAttribute("id", "loading");
loading.setAttribute("style", "text-align:center;background:white;");
while(!this.img_loading_flag){
//陷入死循环 等待gif图片加载完成
}
loading.appendChild(this.loadgif);
this.ParentElement.appendChild(loading);
},
RemoveLoading: function () {
var loading = document.getElementById("loading");
this.ParentElement.removeChild(loading);
},
};
}());

调用DEMO

document.addEventListener("DOMContentLoaded", function () {
var spager = new SPager(4);
spager.ReturnParentElement = function () {
return document.body.children[2].children[0];
};
spager.ReturnGifUrl = function () {
return "/images/cxc_img/loading.gif";
};
spager.CreateChilds = function (PageIndex,PageSize) {
var _ZhaoPinHui = function () {
this.id = null;
this.zhaopinhui_name = null;
this.zhaopinhui_logo_url = null;
this.school_name = null;
this.addr = null;
this.endtime = null;
this.see_count = null;
};
var cline="";
var callback = function (data) {
cline = data;
};
AJAX("/MobileUser/Cuixianchao/AjaxZhaoPinHui", "post", "PageIndex=" + PageIndex + "&PageSize=" + PageSize, callback, false);
if (cline == "") {
return [];
}
var list_ZhaoPinHui = CLine2List(_ZhaoPinHui, cline);
//====================================开始构造 items
var items = [];
for (var i = 0; i < list_ZhaoPinHui.length; i++) {
var li = document.createElement("li");
var h1 = document.createElement("h1");
h1.className = "index2H1";
var a = document.createElement("a");
a.href = "#";
a.innerHTML = list_ZhaoPinHui[i].zhaopinhui_name;
h1.appendChild(a);
var div = document.createElement("div");
var div1 = document.createElement("div");
var div2 = document.createElement("div");
var div3 = document.createElement("div");
div.className = "index2C0";
div1.className = "index2Pic";
div2.className = "index2C";
div3.className = "clear";
var img = document.createElement("img");
img.src = list_ZhaoPinHui[i].zhaopinhui_logo_url;
div1.appendChild(img);
var a2 = document.createElement("a");
a2.href = "#";
var div21 = document.createElement("div");
var div22 = document.createElement("div");
div21.className = "index2C2";
div22.className = "index2C2 index2C2Time";
div21.innerHTML = "<span class=\"index2C2Span\">点击报名</span>举办地：" + list_ZhaoPinHui[i].addr;
div22.innerHTML = "<span>" + list_ZhaoPinHui[i].see_count + "次浏览</span>截止日期：" + list_ZhaoPinHui[i].endtime;
a2.appendChild(div21);
a2.appendChild(div22);
div2.appendChild(a2);
div.appendChild(div1);
div.appendChild(div2);
div.appendChild(div3);
li.appendChild(h1);
li.appendChild(div);

items.push(li);
}
//====================================构造 items 结束
return items;
};
spager.Start();
}, false);

后台方法

public void AjaxZhaoPinHui()
{
string s = "";
ZhaoPinHui_ViewModel xxx = new ZhaoPinHui_ViewModel
{
lz = new List<_ZhaoPinHui>
{
new _ZhaoPinHui
{
id=1,
zhaopinhui_name = "山西电子职业技术学院2016年就业顶岗实习",
zhaopinhui_logo_url="/images/pic1.jpg",
school_name="",
addr="太原市",
endtime="2016/5/26",
see_count="2022"
},
new _ZhaoPinHui
{
id=1,
zhaopinhui_name = "山西电子职业技术学院2016年就业顶岗实习",
zhaopinhui_logo_url="/images/pic1.jpg",
school_name="",
addr="太原市",
endtime="2016/5/26",
see_count="2022"
},
new _ZhaoPinHui
{
id=1,
zhaopinhui_name = "山西电子职业技术学院2016年就业顶岗实习",
zhaopinhui_logo_url="/images/pic1.jpg",
school_name="",
addr="太原市",
endtime="2016/5/26",
see_count="2022"
},
new _ZhaoPinHui
{
id=1,
zhaopinhui_name = "山西电子职业技术学院2016年就业顶岗实习",
zhaopinhui_logo_url="/images/pic1.jpg",
school_name="",
addr="太原市",
endtime="2016/5/26",
see_count="2022"
},
new _ZhaoPinHui
{
id=5,
zhaopinhui_name = "山西电子职业技",
zhaopinhui_logo_url="/images/pic1.jpg",
school_name="",
addr="太原市",
endtime="2016/5/26",
see_count="2022"
},
new _ZhaoPinHui
{
id=6,
zhaopinhui_name = "山西电子职业技",
zhaopinhui_logo_url="/images/pic1.jpg",
school_name="",
addr="太原市",
endtime="2016/5/26",
see_count="2022"
},
new _ZhaoPinHui
{
id=7,
zhaopinhui_name = "山西电子职业技",
zhaopinhui_logo_url="/images/pic1.jpg",
school_name="",
addr="太原市",
endtime="2016/5/26",
see_count="2022"
},
new _ZhaoPinHui
{
id=8,
zhaopinhui_name = "山西电子职业技",
zhaopinhui_logo_url="/images/pic1.jpg",
school_name="",
addr="太原市",
endtime="2016/5/26",
see_count="2022"
},
new _ZhaoPinHui
{
id=9,
zhaopinhui_name = "山西电子职业技术学院2016",
zhaopinhui_logo_url="/images/pic1.jpg",
school_name="",
addr="太原市",
endtime="2016/5/26",
see_count="2022"
},
new _ZhaoPinHui
{
id=10,
zhaopinhui_name = "山西电子职业技术学院2016",
zhaopinhui_logo_url="/images/pic1.jpg",
school_name="",
addr="太原市",
endtime="2016/5/26",
see_count="2022"
},
new _ZhaoPinHui
{
id=11,
zhaopinhui_name = "山西电子职业技术学院2016",
zhaopinhui_logo_url="/images/pic1.jpg",
school_name="",
addr="太原市",
endtime="2016/5/26",
see_count="2022"
},
new _ZhaoPinHui
{
id=12,
zhaopinhui_name = "山西电子职业技术学院2016",
zhaopinhui_logo_url="/images/pic1.jpg",
school_name="",
addr="太原市",
endtime="2016/5/26",
see_count="2022"
},
}
};
int PageIndex = int.Parse(Request["PageIndex"]);
int PageSize = int.Parse(Request["PageSize"]);
List<_ZhaoPinHui> l = new List<_ZhaoPinHui>();
int temp = PageSize * (PageIndex - 1);
for (int i = temp; i < xxx.lz.Count && i < temp + 4; i++)
{
l.Add(xxx.lz[i]);
}
if (l.Count>0)
{
s = CLine.List2CLine(l);
}
Response.Clear();
Response.Write(s);
Response.End();
}