列表加载是移动终端的上拉和下拉，以加载更多组件。基本库主要依靠在iscroll.js v5.1.2基础上开发的组件，可以使用jquery.js或者zepto.js来操作dom节点。目前我使用zepto.js作为操作dom的基本库，DOM以jquery插件的形式存在。如果你不想把它作为一个插件使用，你只需要把listloading直接移植到你需要的库中。列表加载主要针对移动终端，浏览器自带滚动，用户体验非常不友好，与安卓、ios相差甚远。所以我选择了iscroll.js，它是利用css3动画平移2D变换来实现滚动效果，并且变换属性是硬件加速的，所以性能方法有了很大的提升。

Npm安装

复制代码如下：npm install -g listloading

使用方法如下：

1.html结构

它与iscroll创建的结构相同，但是指定的已创建元素节点必须指定ID，因为需要标识组件中的发布订阅模式。因为iscroll必须在创建节点元素之前设置高度，否则会导致无法滚动；Iscroll在创建后被分配给第一个子元素，因此listloading的上拉和下拉刷新也被附加到第一个子元素。事实上，把第一个子元素看作html中的主体就足够了。

2.将要介绍的js

脚本src=' http:/src/jslib/zepto . min . js '/script script src=' http 3360./src/jslib/isscroll . js '/script script src=' http 3360./build/listloading.js'/script3

var m=3，n=0；//在创建iscroll之前，必须设置父元素的高度，否则不能拖动iScroll $ ('# listloading ')。高度($(窗口)。高度())；//模板或ajax请求方法var create html=function(){ var _ _ html=' '；for(var I=0；i 15i ){var now=new Date()。getTime()；now=新日期(现在我* 1000000)；_ _ html=' lispan class=' icon '/spanp class=' title ' time class=' r ' ' now . gethours()' : ' now . getminutes()' : ' now . getseconds()'/timelistlistloading '(n)'/PP class=' text '移动终端上的上拉、下拉、刷新组件./Li '；}返回_ _ html}//选择器必须是ID，因为它需要通过发布订阅来标识。var listloading=$ ('# listloading ')。listballing({ disabletimes : true，//是否需要显示时间上拉3360函数(CB){//上拉加载更多m-；var flg=falsevar _ _ html=CreateHTML()；if(m1){ flg=true；}else{$('#order-list ')。追加(_ html)；}//加载数据时，需要返回end为真，则为所有数据加载CB(flg)；}，下拉动作：功能(CB){//下拉刷新m=3；n=0；var _ _ html=CreateHTML()；$(' #订单列表')。html(_ html)；//回调必须在执行完执行方法后执行。回调的作用是通知默认加载已经完全执行，程序需要创建iscrollcb()；}，API isc roll options : of//I scroll {//} })；//click事件因为iscroll防止冒泡，所以也建议自己写一个click方法。如果行preventDefault为false，则解决onclick失败问题，但如果打开此值，则在微信下拖动时会出现问题。滑动结束后，无法触发scrollend，所以我嵌入了一个事件方法listloading.evt ('Li '，' click '，function(DOM){//DOM . remove ./$(' # order-list ')。追加(CreateHTML())；//list loading . refresh()；});翻译

/p

4、原料药

4.1下拉刷新

初始化将执行一次，主要是创建iscroll，然后在每次下拉刷新后执行。当你的程序在方法中执行时，需要执行一个回调函数，通知所有程序都已经执行完毕，listloading会自动调用iscroll的refresh函数，回调不需要传递参数。

选项。下拉动作=函数(CB){//下拉刷新.//执行完执行方法后必须执行回调CB()；}4.2上拉刷新

每次上拉刷新后，执行完程序后需要执行一个回调函数，在回调中需要回调一个布尔值。如果是真的，怎么可能完全装上拉到底？

选项。上拉=函数(CB){//下拉刷新.//执行完执行方法后，必须执行回调。true表示下拉至CB(true)；}4.3销毁列表加载

复制代码如下： list loading . destroy()；

4.4刷新列表加载

如果滚动区域节点中有添加或删除，则需要在操作完成后调用此方法

复制代码如下： list loading . refresh()；

4.5显示时间是否默认为假

“真”下拉列表显示从上次刷新开始的时间

复制代码如下：options.disableTime=true

4.6向上拉以刷新文本

复制代码如下：options.upLoadmoretxt='拉起并刷新文本'；//html标签可以放在里面

4.7下拉刷新文本

复制代码如下：options.pullDrefreshtxt='下拉刷新文本'；//html标签可以放在里面

4.8加载汉字

复制代码如下： options . loader text='加载汉字'；//html标签可以放在里面

4.9松开并刷新文本

复制代码如下：选项。Realtimetxt=“松开并刷新文本”；//html标签可以放在里面

4.10所有字符都已加载

复制代码如下：options.loaderendtxt='所有字符已加载'；//html标签可以放在里面

4.12卷的配置

复制代码如下： options . iscrolloptions={ }；

以上就是边肖推出的Listloading.js移动终端上拉下拉刷新组件。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！