listloadig.js
listloadig是一个移动端的上拉、下拉加载更多的组件。主要依赖于iscroll.jsv5.1.2基础上开发的组件，基础库可以使用jquery.js或者zepto.js操作dom节点，目前我是使用了zepto.js作为基础库操作dom，以jquery插件的形式存在。如果不想以插件方式使用，则只需要把listloadig直接移植你需要的库里面就ok啦。listloadig主要针对移动端而生，在使用浏览器自带滚动，用户体验很不友好，与Adroid和ios差别甚远，所以选择iscroll.js，它实现方式是使用css3动画traslate2D转换来实现滚动效果，trasform属性使用硬件加速，性能方法得到很大提高。
pm安装pm istall -g listloadig使用方法如下：1、html结构<div id="listloadig"> <div> <ul id="order-list"></ul> </div></div>与iscroll创建的结构一样，但是指定的创建的元素节点必须指定ID，因为在组件里面发布订阅模式需要做一个标识。因为iscroll在节点元素创建之前，必须先设定高度，否则会导致无法滚动；iscroll创建完毕是指定给第一个子元素滚动，所以listloadig的上拉和下拉刷新也是追加到第一个子元素里面，其实把第一个子元素想象成为html里面的body就可以了。
2、需要引入的js<script src="../src/jslib/zepto.mi.js"></script> <script src="../src/jslib/iscroll.js"></script> <script src="../build/listloadig.mi.js"></script>3、调用var m = 3;var = 0;var hei = $(widow).height();// 创建iscroll之前必须要先设置父元素的高度，否则无法拖动iscroll$('#listloadig, .listloadigClass').height(hei);// 模板var createHtml = fuctio(){ var __html = ''; for(var i = 0; i < 15; i++){ var ow = ew Date().getTime(); ow = ew Date(ow + i*1000000); __html += '<li><spa class="ico"></spa><p class="title"><time class="r">' + ow.getHours() + ':' + ow.getMiutes() + ':' + ow.getSecods() + '</time>listloadig' + (++) + '</p><p class="text">移动端上拉下拉刷新组件...</li>'; } retur __html;}// demo// var listloadig = $('#listloadig').listloadig({// disableTime: true, // 是否需要显示时间// pullUpActio : fuctio(cb){ //上拉加载更多// m--;// var flg = false;// var __html = createHtml();// if(m < 1){// flg = true;// }else{// $('#order-list').apped(__html);// }// // 数据加载完毕需要返回 ed为true则为全部数据加载完毕// cb(flg);// },// pullDowActio : fuctio(cb, flag){ //下拉刷新// flag 为true 第一次加载// if (flag) {// // dosomethig...// }// m = 3;// var __html = createHtml();// $('#order-list').html(__html);// // 执行完执行方法之后必须执行回调 回调的作用是通知默认加载已经全部执行完毕，程序需要去创建iscroll// cb();// },// // iscroll的API // iscrollOptios: {// //// }// });// // 点击事件// listloadig.evt('li', 'click', fuctio (dom) {// // dom.remove();// // $('#order-list').apped(createHtml());// // listloadig.refresh();// });// demovar k = 3;var listloadigClass = $('.listloadigClass').listloadig({ pullUpActio : fuctio(cb){ //上拉加载更多 k--; var flg = false; var __html = createHtml(); if(k < 1){ flg = true; }else{ $('#listloadigClass-order-list').apped(__html); } // 数据加载完毕需要返回 ed为true则为全部数据加载完毕 cb(flg); }, pullDowActio : fuctio(cb, flag){ //下拉刷新 // flag 为true 第一次加载 if (flag) { // dosomethig... } k = 3; var __html = createHtml(); $('#listloadigClass-order-list').html(__html); // 执行完执行方法之后必须执行回调 回调的作用是通知默认加载已经全部执行完毕，程序需要去创建iscroll cb(); }});效果图
4、API4.1下拉刷新初始化会执行一次，主要是创建iscroll，之后每次下拉刷新结束之后执行，当在方法里面执行完毕你的程序之后需要执行一个回调函数，告知已经全部程序执行完毕，listloadig就会自动去调用iscroll的刷新功能，回调不需要传参。
optios.pullDowActio = fuctio(cb, flag){ // 下拉刷新 // flag 为true 第一次加载 if (flag) { // dosomethig... } // 执行完执行方法之后必须执行回调 cb();}4.2上拉加载更多每次上拉加载更多结束之后执行，同样的在执行完你的程序之后需要执行一个回调函数，回调里面需要回调一个布尔值，如果为true则怎么已经全部加载完毕，就已经拉到底了。
optios.pullUpActio = fuctio(cb){ // 上拉加载更多 ..... // 执行完执行方法之后必须执行回调 true为上拉到底 cb(true);}4.3销毁ListLoadiglistloadig.destroy();4.4刷新listloadig滚动区域节点有增删则需要在操作完毕之后调用此方法
listloadig.refresh();4.5是否显示时间默认值为falsetrue下拉显示时间，距离上次刷新的时间
optios.disableTime = true4.6上拉加载更多文字optios.upLoadmoretxt = '上拉加载更多文字'; // 里面可以放html标签4.7下拉刷新文字optios.pullDrefreshtxt = '下拉刷新文字'; // 里面可以放html标签4.8正在加载中文字optios.loadertxt = '正在加载中文字'; // 里面可以放html标签4.9松开刷新文字optios.Realtimetxt = '松开刷新文字'; // 里面可以放html标签4.10已经全部加载完毕文字optios.loaderedtxt = '已经全部加载完毕文字'; // 里面可以放html标签4.11iscroll的配置optios.iscrollOptios = {};
评论