listloading.jslistloading是一个移动端的上拉、下拉加载更多的组件。主要依赖于iscroll.js v5.1.2基础上开发的组件,基础库可以使用jquery.js或者zepto.js操作dom节点,目前我是使用了zepto.js作为基础库操作dom,以jqu ...
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属性使用硬件加速,性能方法得到很大提高。
npm安装
npm install -g listloading
3、调用
var m = 3, n = 0;// 创建iscroll之前必须要先设置父元素的高度,否则无法拖动iscroll$('#listloading').height($(window).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 ></span><p ><time >' + now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds() + '</time>listloading' + (n++) + '</p><p >移动端上拉下拉刷新组件...</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.4 刷新listloading
滚动区域节点有增删则需要在操作完毕之后调用此方法
listloading.refresh();
4.5 是否显示时间 默认值为false
true下拉显示时间,距离上次刷新的时间
options.disableTime = true
4.6 上拉刷新文字
options.upLoadmoretxt = '上拉刷新文字'; // 里面可以放html标签
4.7 下拉刷新文字
options.pullDrefreshtxt = '下拉刷新文字'; // 里面可以放html标签
4.8 正在加载中文字
options.loadertxt = '正在加载中文字'; // 里面可以放html标签
4.9 松开刷新文字
options.Realtimetxt = '松开刷新文字'; // 里面可以放html标签
4.10 已经全部加载完毕文字
options.loaderendtxt = '已经全部加载完毕文字'; // 里面可以放html标签
4.12 iscroll的配置
options.iscrollOptions = {};
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理:https://www.xlkjsw.com
原标题:移动端上拉下拉刷新组件
关键词:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。