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

最新推荐文章于 2021-06-08 14:27:39 发布
最新推荐文章于 2021-06-08 14:27:39 发布
阅读量7.3k 收藏
点赞数
分类专栏： web前端 文章标签： javascript 分页 插件
本博客所有公开的原创博文皆允许转载，无须再征求作者本人（也就是我）同意
本文链接：https://blog.csdn.net/for_cxc/article/details/52054743
版权

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();
        }



Rand Tsui
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
移动端html5页面翻页
08-02
移动端，html5翻页效果，适合用于微信h5页面宣传！！！
移动端的分页
Lschange的博客
11-10 4994
移动端会考虑用户的体验度，在首页不会一次性加载所有的数据 具体思路：当用户刚打开页面，会自动加载页面默认的几条数据（由前后端协调而定），一般情况前端需要向后台返回两个参数：page和rows  page代表页数；rows代表几条数据；给window一个滚动事件，判断可视窗口的高度与滚动的高度和是否大于页面的高度，如果大于，则通过ajax向后台返回参数，拿到数据，进行渲染；如果为了体验度，也可以在
分页插件，适配PC移动端
11-02
/* * 定义回掉函数 * @param number:跳转页 * */ function pageChange(i) { alert("index is :" + i); Pagination.Page($(".ht-page"), i, 10000, 10); } /* * 初始化插件 * @param object:翻页容器对象 * @param function:回调函数 * */ Pagination.init($(".ht-page"), pageChange); /* * 首次调用 * @param object:翻页容器对象 * @param number:当前页 * @param number:总页数 * @param number:每页数据条数 * */ Pagination.Page($(".ht-page"), 3, 10000, 10);
手机端html生成pdf,bookjs-eazy: HTML自动分页插件。用于生成PDF,前端WEB打印生成PDF或后端wkhtmltopdf、chrome headless生成...
weixin_35120608的博客
06-08 417
NOP BOOK TESTbookConfig = {pageSize : 'A4',// orientation : 'portrait',// landscapeorientation : 'landscape',padding : "20mm 10mm 20mm 10mm",// 页码设置simplePageNum : {pageBegin : 0,pageEnd : -1,},// 目录...
js 实现无限加载分页（适合移动端）
热门推荐
良_123的专栏
05-24 3万+
js 实现无限加载分页（适合移动端） 原理：当滚动条到达底部时，执行下一页内容。 判断条件需要理解三个概念：     1.scrollHeight 真实内容的高度     2.clientHeight 视窗的高度，即在浏览器中所能看到的内容的高度     3.scrollTop 视窗上面隐藏掉的部分，即滚动条滚动的距离 思路：     1.使用fixed定位加载框
移动端滑动分页详解（手写插件+亲测demo）
ITzhongzi的博客
08-01 3611
这是本人尝试手写的一个基于jq uery 的插件 测试结构代码如下：（index.html） html lang="en"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> meta http-equiv="X-UA-
基于jQuery WeUi非常简单易用的手机端滚动翻页插件（scroll-grid）
mzllyl的专栏
12-02 2103
一、组件概述  基于jQuery WeUi的手机端滚动分页组件，实现上拉加载下一页数据及下拉加载最新数据。对比网上常用手机端分页组件（如，iscroll.js）主要有以下优势：  1.使用非常简单，学习成本很低，1行js代码既可以完成前端代码编写  2.列表点击进入详情后，再返回列表时可以保留进入详情前的数据以及滚动的位置。这一点是最重要的优势，也是当时写这个组件的动机。 二、实现思路 ...
手机端书本翻页效果
08-12
手机端书本翻页效果，支持支持支持
jQuery漂亮滚动分页示例插件(jPaginate)
12-13
jQuery漂亮滚动分页示例插件(jPaginate)
SPager 三个分页架构Demo
Rand Tsui
07-30 1362
SPager.js /* SPager 调用说明 */ //第一步 建立 SPager对象 var spager = new SPager(4); 参数为 每页 item 个数 PageSize //第二步 必须重写 SPager 的 ReturnParentElement 方法 ，返回 item 的父元素 //第三步 必须重写 SPager 的 ReturnGifUrl 方法 ，返回 加载动画
jquery列表分页样式支持手机端分页滚动效果代码
11-24
jquery列表分页样式支持手机端分页滚动效果代码
类似翻书特效插件,翻书效果
09-20
前端用3D特效,书城专用特效,可用于各大书城类网站,实现书籍内容预览功能,可把pdf转入其中
iSlider手机端图片滑动切换插件使用详解
10-15
主要为大家详细介绍了iSlider手机端图片滑动切换插件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jQuery响应式手机端触屏滑动图片轮播插件
06-09
jQuery响应式手机端触屏滑动图片轮播插件，含多种图片滑动切换效果可选，兼容PC端与手机端。
jQuery带跳转滑动分页插件
06-24
jQuery带跳转滑动分页插件是一款支持左右滑动切换，带搜索跳转到指定页数，显示总分页代码。
css3实现可滑动跳转的分页插件示例
09-25
主要介绍了css3实现可滑动跳转的分页插件示例,需要的朋友可以参考下
JS 上传文件之FormData 与Blob 对象
Rand Tsui
03-20 1万+
SA $.domLoad(function () { var formdata = new FormData(); formdata.append("a","ffdfdf"); formdata.append("file1",new Blob(["Hello World!"],{t
常见竖屏设备屏幕宽高比
Rand Tsui
09-12 1万+
平板设备 768 / 1024 = 0.75 834 / 1112 = 0.75 1024 / 1366 =0.7496339677891654465592972181552‬ 正常手机 320 / 568 =0.56338028169014084507042253521127‬ 360 / 640 =0.5625 375 / 667 =0.56221889055472...
【JavaScript】String 转 ArrayBuffer
Rand Tsui
07-21 8130
function String2ArrayBuffer(str, cb) { var b = new Blob([str]); var f = new FileReader(); f.onload = function(e) { cb(e.target.result); } f.rea...
fullPage.js插件，在手机端滑动的时候会出现自动定位的问题
最新发布
07-08
在移动端使用fullPage.js插件时，出现自动定位问题的原因可能是由于浏览器的默认行为与插件的滚动行为冲突所致。为了解决这个问题，你可以尝试禁用浏览器的默认滚动行为。以下是一种可能的解决方法： ```javascript...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值