iscroll.js listloading.js是一个移动端的上拉、下拉加载更多的组件
2017-12-12 15:22
537 查看
https://github.com/gtdalp/listloading
解决新版浏览器(Android 7.0)导致iscroll无法滚动
https://github.com/gtdalp/listloading/commit/c358e3e067d192d0926cca42bb940903298ea0ac
listloading是一个移动端的上拉、下拉加载更多的组件。主要依赖于iscroll.js v5.1.2基础上开发的组件,基础库可以使用jquery.js或者zepto.js操作dom节点,目前我是使用了zepto.js作为基础库操作dom,以jquery插件的形式存在。如果不想以插件方式使用,则只需要把listloading直接移植你需要的库里面就ok啦。listloading主要针对移动端而生,在使用浏览器自带滚动,用户体验很不友好,与Android和ios差别甚远,所以选择iscroll.js,它实现方式是使用css3动画translate
3D 转换来实现滚动效果,transform属性使用硬件加速,性能方法得到很大提高。支持Node引入,require引入.
与iscroll创建的结构一样,但是指定的创建的元素节点必须指定ID,因为在组件里面发布订阅模式需要做一个标识。因为iscroll在节点元素创建之前,必须先设定高度,否则会导致无法滚动;iscroll创建完毕是指定给第一个子元素滚动,所以listloading的上拉和下拉刷新也是追加到第一个子元素里面,其实把第一个子元素想象成为html里面的body就可以了。
初始化会执行一次,主要是创建iscroll,之后每次下拉刷新结束之后执行,当在方法里面执行完毕你的程序之后需要执行一个回调函数,告知已经全部程序执行完毕,listloading就会自动去调用iscroll的刷新功能,回调不需要传参。
每次上拉加载更多结束之后执行,同样的在执行完你的程序之后需要执行一个回调函数,回调里面需要回调一个布尔值,如果为true则怎么已经全部加载完毕,就已经拉到底了。
滚动区域节点有增删则需要在操作完毕之后调用此方法
true下拉显示时间,距离上次刷新的时间
listloading
解决新版浏览器(Android 7.0)导致iscroll无法滚动
https://github.com/gtdalp/listloading/commit/c358e3e067d192d0926cca42bb940903298ea0ac
listloading是一个移动端的上拉、下拉加载更多的组件。主要依赖于iscroll.js v5.1.2基础上开发的组件,基础库可以使用jquery.js或者zepto.js操作dom节点,目前我是使用了zepto.js作为基础库操作dom,以jquery插件的形式存在。如果不想以插件方式使用,则只需要把listloading直接移植你需要的库里面就ok啦。listloading主要针对移动端而生,在使用浏览器自带滚动,用户体验很不友好,与Android和ios差别甚远,所以选择iscroll.js,它实现方式是使用css3动画translate
3D 转换来实现滚动效果,transform属性使用硬件加速,性能方法得到很大提高。支持Node引入,require引入.
效果图:
demo地址: https://gtdalp.github.io/widget/listloading/demos/listloading.html
npm安装
npm install listloading
使用方法如下:
1、html结构
<div id="listloading"> <div> <ul id="order-list"></ul> </div> </div>
与iscroll创建的结构一样,但是指定的创建的元素节点必须指定ID,因为在组件里面发布订阅模式需要做一个标识。因为iscroll在节点元素创建之前,必须先设定高度,否则会导致无法滚动;iscroll创建完毕是指定给第一个子元素滚动,所以listloading的上拉和下拉刷新也是追加到第一个子元素里面,其实把第一个子元素想象成为html里面的body就可以了。
2、需要引入的js
<script src="../src/jslib/zepto.min.js"></script> <script src="../src/jslib/iscroll.js"></script> <script src="../build/listloading.min.js"></script>
3、调用
var Listloading = require('listloading'); var m = 3; var n = 0; var hei = $(window).height(); // 创建iscroll之前必须要先设置父元素的高度,否则无法拖动iscroll $('#listloading, .listloadingClass').height(hei); // 模板 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; } // demo var listloading = new 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){ // 下拉刷新 // true则为默认加载 false为下拉刷新 if (flg) { console.log('默认加载'); } m = 3; var __html = createHtml(); $('#order-list').html(__html); // 执行完执行方法之后必须执行回调 回调的作用是通知默认加载已经全部执行完毕,程序需要去创建iscroll或者做下拉刷新动作 cb(); }, // iscroll的API iscrollOptions: { // } }); // 点击事件 listloading.evt('li', 'click', function (dom) { dom.remove(); // $('#order-list').append(createHtml()); listloading.refresh(); }); // demo // var k = 3; // var listloadingClass = new Listloading('.listloadingClass', { // pullUpAction : function(cb){ //上拉加载更多 // k--; // var flg = false; // var __html = createHtml(); // if(k < 1){ // flg = true; // }else{ // $('#listloadingClass-order-list').append(__html); // } // // 数据加载完毕需要返回 end为true则为全部数据加载完毕 // cb(flg); // }, // pullDownAction : function(cb, flag){ //下拉刷新 // // flag 为true 第一次加载 // if (flag) { // // dosomething... // } // k = 3; // var __html = createHtml(); // $('#listloadingClass-order-list').html(__html); // // 执行完执行方法之后必须执行回调 回调的作用是通知默认加载已经全部执行完毕,程序需要去创建iscroll或者做下拉刷新动作 // cb(); // } // });
4、API
4.1
下拉刷新
初始化会执行一次,主要是创建iscroll,之后每次下拉刷新结束之后执行,当在方法里面执行完毕你的程序之后需要执行一个回调函数,告知已经全部程序执行完毕,listloading就会自动去调用iscroll的刷新功能,回调不需要传参。options.pullDownAction = function(cb, flag){ // 下拉刷新 // flag 为true 第一次加载 if (flag) { // dosomething... } // 执行完执行方法之后必须执行回调 cb(); }
4.2
上拉加载更多
每次上拉加载更多结束之后执行,同样的在执行完你的程序之后需要执行一个回调函数,回调里面需要回调一个布尔值,如果为true则怎么已经全部加载完毕,就已经拉到底了。options.pullUpAction = function(cb){ // 上拉加载更多 ..... // 执行完执行方法之后必须执行回调 true为上拉到底 cb(true); }
4.3
销毁ListLoading
listloading.destroy();
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 = {};
目录结构
listloading├────build | └──listloading.js // 源文件 ├────demos | └──.... // demo字体样式 ├────dist | |──css | | └──listloading.min.css // 压缩css | └──js | └──listloading.min.js // 压缩js源文件 ├────src | |──css | | └──base.css // 基础base样式 | |──fontface | | └──... // 字体文件 | |──images | | └──... // demo图片 | |──jslib | | └── ... // 第三方库
相关文章推荐
- iscroll.js listloading.js是一个移动端的上拉、下拉加载更多的组件
- zepto.js + iscroll.js上拉加载 下拉加载的 移动端 新闻列表页面
- 移动端下拉加载更多DEMO(纯js实现)
- Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
- 使用vue.js 在移动端简单实现的下拉加载更多 和一些常用的js/jq操作和vueFilter,v-if和v-show运用
- Listloading.js移动端上拉下拉刷新组件
- 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多
- listloading 移动端加载刷新
- iscroll实现移动端下拉刷新,上拉加载更多
- 针对自定义组件上拉刷新下拉加载更多PullToRefreshView的分析(二)
- 下拉加载更多DEMO(js实现)
- thinkphp5.0+js 手机下拉加载更多
- 针对自定义组件上拉刷新下拉加载更多PullToRefreshView的分析(一)
- [js开源组件开发]loading加载效果
- js移动端滑动一个屏幕再加载新的数据以及ajax同步请求
- Android之Socket通信、List加载更多、Spinner下拉列表
- js获取页面加载过程做一个简单的loading
- 针对自定义组件上拉刷新下拉加载更多PullToRefreshView的分析(一)
- 下拉加载更多DEMO(js实现)
- ZrcListView:一个流畅又漂亮的Android下拉刷新与加载更多列表组件