listloading.JS
listloading 是一个移动端的上拉, 下拉加载更多的组件. 主要依赖于 iscroll.JS v5.1.2 基础上开发的组件, 基础库可以使用 jQuery.JS 或者 zepto.JS 操作 dom 节点, 目前我是使用了 zepto.JS 作为基础库操作 dom, 以 jQuery 插件的形式存在. 如果不想以插件方式使用, 则只需要把 listloading 直接移植你需要的库里面就 ok 啦. listloading 主要针对移动端而生, 在使用浏览器自带滚动, 用户体验很不友好, 与 Android 和 iOS 差别甚远, 所以选择 iscroll.JS, 它实现方式是使用 CSS3 动画 translate 2D 转换来实现滚动效果, transform 属性使用硬件加速, 性能方法得到很大提高.
[backcolor=#b7dde8]GitHub 下载地址: https://github.com/gtdalp/listloading.git https://github.com/gtdalp/listloading.git 如果觉得还过得去请给个星吧 O(∩_∩)O~
NPM 安装
JavaScript 代码
NPM install -g listloading
使用方法如下:
1,html 结构
与 iscroll 创建的结构一样, 但是指定的创建的元素节点必须指定 ID, 因为在组件里面发布订阅模式需要做一个标识. 因为 iscroll 在节点元素创建之前, 必须先设定高度, 否则会导致无法滚动; iscroll 创建完毕是指定给第一个子元素滚动, 所以 listloading 的上拉和下拉刷新也是追加到第一个子元素里面, 其实把第一个子元素想象成为 HTML 里面的 body 就可以了.
HTML 代码
- <div id="listloading">
- <div>
- <ul id="order-list"></ul>
- </div>
- </div>
2, 需要引入的 JS
JavaScript 代码
- <script src="../src/jslib/zepto.min.js">
- </script>
- <script src="../src/jslib/iscroll.js">
- </script>
- <script src="../build/listloading.js">
- </script>
3, 调用
JavaScript 代码
- var m = 3, n = 0;
- // 创建 iscroll 之前必须要先设置父元素的高度, 否则无法拖动 iscroll
- $('#listloading').height($(Windows).height());
- // 模板或者 Ajax 请求方法
- var createHtml = function(){
- var __html = '';
- for(var i = 0; i <15; i++){
- var now = new Date().getTime();
- now = new Date(now + i*1000000);
- __html += '<li><span class="icon"></span><p class="title"><time class="r">' + now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds() + '</time>listloading' + (n++) + '</p><p class="text"> 移动端上拉下拉刷新组件...</li>';
- }
- return __html;
- }
- // 选择器必须是 ID 因为要用到发布订阅做标识
- var listloading = $('#listloading').listloading({
- disableTime: true, // 是否需要显示时间
- pullUpAction : function(cb){ // 上拉加载更多
- m--;
- var flg = false;
- var __html = createHtml();
- if(m < 1){
- flg = true;
- }else{
- $('#order-list').append(__html);
- }
- // 数据加载完毕需要返回 end 为 true 则为全部数据加载完毕
- cb(flg);
- },
- pullDownAction : function(cb){ // 下拉刷新
- m = 3;
- n = 0;
- var __html = createHtml();
- $('#order-list').HTML(__html);
- // 执行完执行方法之后必须执行回调 回调的作用是通知默认加载已经全部执行完毕, 程序需要去创建 iscroll
- cb();
- },
- // iscroll 的 API
- iscrollOptions: {
- //
- }
- });
- // 点击事件 因为 iscroll 阻止了冒泡, 它也建议自己写点击方法, 如果开启 preventDefault 为 false 这行就是解决 onclick 失效问题, 但是开启这个值在微信下面拖动会有问题 滑动结束之后触发不到 scrollend, 所以我自己内嵌了一个事件方法
- listloading.evt('li', 'click', function (dom) {
- // dom.remove();
- // $('#order-list').append(createHtml());
- // listloading.refresh();
- });
效果图
4,API
4.1 下拉刷新
初始化会执行一次, 主要是创建 iscroll, 之后每次下拉刷新结束之后执行, 当在方法里面执行完毕你的程序之后需要执行一个回调函数, 告知已经全部程序执行完毕, listloading 就会自动去调用 iscroll 的刷新功能, 回调不需要传参.
JavaScript 代码
- options.pullDownAction = function(cb){ // 下拉刷新
- .....
- // 执行完执行方法之后必须执行回调
- cb();
- }
4.2 上拉刷新
每次上拉刷新结束之后执行, 同样的在执行完你的程序之后需要执行一个回调函数, 回调里面需要回调一个布尔值, 如果为 true 则怎么已经全部加载完毕, 就已经拉到底了.
JavaScript 代码
- options.pullUpAction = function(cb){ // 下拉刷新
- .....
- // 执行完执行方法之后必须执行回调 true 为下拉到底
- cb(true);
- }
4.3 销毁 ListLoading
JavaScript 代码
listloading.destroy();
4.4 刷新 listloading
滚动区域节点有增删则需要在操作完毕之后调用此方法
JavaScript 代码
listloading.refresh();
4.5 是否显示时间 默认值为 false
true 下拉显示时间, 距离上次刷新的时间
JavaScript 代码
options.disableTime = true
4.6 上拉刷新文字
JavaScript 代码
options.upLoadmoretxt = '上拉刷新文字'; // 里面可以放 HTML 标签
4.7 下拉刷新文字
JavaScript 代码
options.pullDrefreshtxt = '下拉刷新文字'; // 里面可以放 HTML 标签
4.8 正在加载中文字
JavaScript 代码
options.loadertxt = '正在加载中文字'; // 里面可以放 HTML 标签
4.9 松开刷新文字
JavaScript 代码
options.Realtimetxt = '松开刷新文字'; // 里面可以放 HTML 标签
4.10 已经全部加载完毕文字
JavaScript 代码
options.loaderendtxt = '已经全部加载完毕文字'; // 里面可以放 HTML 标签
4.12 iscroll 的配置
JavaScript 代码
options.iscrollOptions = {};
来源: http://www.qdfuns.com/article/30298/8bf54a68a2951b23353e471e82f049fe.html