当前位置

网站首页> 程序设计 > 程序资讯 > 软件更新资讯 > 浏览文章

layPage 1.2 发布,小而美多功能分页方案

作者:小梦 来源: 网络 时间: 2024-08-22 阅读:

阿里百川,开启移动应用开发的新篇章

layPage 是一枚小小前端组件,这篇新闻主要是为了混个脸熟,继续像往常一样愉快地装下A,顺便向伟大的OSCHINA敬礼。正如一小戳人之前所了解的,layPage是一款多功能的js分页组件,即适用于异步分页,又可用于传统的整页刷新跳页,还支持信息流加载。那么。。。各位可观不要嫌弃。

【1.2更新日志】

1、完善jump回调,新增第二个参数,用于在使用location跳转时,控制页面初始加载无限刷新的问题。
2、完善hash机制,页面初始加载时,当前页为1时,不改变location.hash。另外可对参数hash赋上特定值,以便初始化时获取当前页复制给curr。
3、完善cont、pages、groups,传入的数值支持string和number
4、样式微调

【粒子】

1.异步分页

//以下将以jquery.ajax为例,演示一个异步分页$.getJSON('test/demo1.json', {curr: 6}, function(res){ //从第6页开始请求。返回的json格式可以任意定义    laypage({        cont: 'page1', //容器。值支持id名、原生dom对象,jquery对象。        pages: res.pages, //通过后台拿到的总页数        curr: 6, //初始化当前页        jump: function(e){ //触发分页后的回调            $.getJSON('test/demo1.json', {curr: e.curr}, function(res){                e.pages = e.last = res.pages; //重新获取总页数,一般不用写                //渲染                var view = document.getElementById('view1'); //你也可以直接使用jquery                var demoContent = (new Date().getTime()/Math.random()/1000)|0; //此处仅仅是为了演示                view.innerHTML = res.content + demoContent;            });        }    });});

2.整页刷新跳页

laypage({    cont: 'page11',    pages: 18, //可以叫服务端把总页数放在某一个隐藏域,再获取。假设我们获取到的是18    curr: function(){ //通过url获取当前页,也可以同上(pages)方式获取        var page = location.search.match(/page=(\d+)/);        return page ? page[1] : 1;    }(),     jump: function(e, first){ //触发分页后的回调        if(!first){ //一定要加此判断,否则初始时会无限刷新            location.href = '?page='+e.curr;        }    }});

更多的例子请去官网围观。

新闻写完。。。掩脸闪人。。。

热点阅读

网友最爱