移动端页面插件dropload.js（Zepto和jQuery支持）

dropload.js提供了最基本的拉页，下拉刷新功能的情况下，所有的数据都是从服务器返回它曾经是非常普遍的。

然而，这些要求通常不是一次性将所有数据返回给服务器，而且通常还支持服务器分页、搜索、排序和多状态筛选的功能。
1。解决

改进1：通过分页、搜索、排序和多条件筛选，您可能不需要退出，页面上没有数据。

例如：搜索服务器上不存在的名称。

因此，添加界面设置sethasdata。
mydropload.prototype.sethasdata =功能（ishasdata）{
我=这个；
如果（ishasdata）{
me.isdata =真；
我domdown.html美元（我的选择。domdown。domrefresh）；
FnRecoverContentHeight（我）；
{人}
me.isdata = false；
我domdown.html美元（我的选择。domdown。domnodata）；
FnRecoverContentHeight（我）；
}
}；

改进2：上述问题也会导致错误选择不同的筛选条件，然后拔起并加载更多，此时没有响应。

原因相当复杂。例如，说明在不同的筛选条件下可以选择不同的数据。如果resetload不再执行，该页的计算距离拉起来将是一个问题。

1。只要API发送到服务器，resetload必须执行，不管成功或失败，和resetload时需要的所有新的数据加载。

2。改变resetload如下，添加一个调用屏幕大小的方法。
mydropload.prototype.resetload =函数（）{
我=这个；
如果（me.direction = = 'down'me。upinsertdom）{
我domup.css美元（{ 'height'：‘0'}），（'webkittransitionend moztransitionend transitionend，函数（）{）
me.loading = false；
me.upinsertdom = false；
美元（这个）；
FnRecoverContentHeight（我）；
}）；
否则如果}（me.direction = =向上）{
me.loading = false；
如果（我的数据）{
我domdown.html美元（我的选择。domdown。domrefresh）；
FnRecoverContentHeight（我）；
{人}
我domdown.html美元（我的选择。domdown。domnodata）；
}
}
}

三.为了解决以上两个问题，基本解决90%个问题，一个在sethasdata（假）处理。（假设20个数页）

错误：在筛选条件1：返回20个数据，拉更多的回10条数据，设置sethasdata（假）在这个时候，选择过滤条件2、20的回报数据，拉起来，你会惊奇地发现，你不能把它。

为什么：后sethasdata（假），国家仍然是在没有更多的数据的状态。上拉负载应锁定在这个时间，和过滤后的改变，锁不锁，所以它不能停。

解决方案：sethasdata（真正的）需要设置每次搜索条件，条件，和排序发生变化。

两。调用方法

整个页面逻辑更复杂。

1。选择要添加到负载的div，添加调用方法。

注意事项：

（1）记得保存返回对象。

（2）LoadDownFn上拉加载后的回调，你想把这里的逻辑。我在此页的API，API参数偏移加20，然后发送API。

（3）无论API返回失败，必须resetload。

这里强调：

fetchdata函数调用API的发送成功或失败，都必须self.morefund.resetload（）。

当你失败了，打电话给self.morefund.resetload（）直接。新的数据返回时，HTML是动态加载JS，和self.morefund.resetload（）加载完成后执行。
self.morefund = $（#表fundlist）。Dropload（{
ScrollArea：窗口，
domdown：{
DomClass：'dropload-down，
DomRefresh：拉了，
domload：，
domnodata：
}，
LoadDownFn：函数（）{
self.apiparams.offset = 20；
self.fetchdata（真的）；
}
}）；

2。sethasdata详细解释

（1）当需要设置真值时。

当非页面API触发。一个新的搜索领域的选择，一个新的搜索区域被选中，和一个新的排序字段选择。这一次必须sethasdata（真的）。

this.morefund.sethasdata（真的）；

（2）何时设置错误。

服务器返回的数据，参赛人数由服务器返回并将条目数量的API都是一样的，不设置sethasdata（假）。

如果（data.length <这。apiparams。计数）{
this.morefund.sethasdata（假）；
This.moreFund.lock（）；
}
三.锁定和解锁详细说明

（1）何时设置锁。

服务器返回数据，服务器返回的条目数和发送API中条目的数目相同，不设置锁（）。

在不需要拖动负载时，当前页状态需要设置锁（）。例如：搜索框中输入的状态。

（2）何时设置解锁。

只有一个地方需要调用。在发送API之前设置解锁。

如果（自我。morefund）{
Self.moreFund.unlock（）；
}
三，js和css源代码

Js：

（函数（$）{）
严格使用；
var =窗口；
文档；
值= $（赢）；
var $ $ = $（doc）；
美元。fn.dropload =功能（选项）{
返回新的mydropload（这个选项）；
}；
无功mydropload =功能（元，期权）{
我=这个；
元素$ = $（元素）；
me.upinsertdom = false；
me.loading = false；
me.islockup = false；
me.islockdown = false；
me.isdata =真；
我_scrolltop = 0；
Me.init（选项）；
}；
mydropload.prototype.init =功能（选项）{
我=这个；
me.opts =美元。延长（{ }，{
ScrollArea：我为元，
DomUp：{
DomClass：'dropload-up，
DomRefresh：下拉刷新，
domupdate：更新，
domload：
}，
domdown：{
DomClass：'dropload-down，
DomRefresh：拉了，
domload：，
domnodata：
/ / domnodata：没有数据
}，
距离：50 拉距离
阈值：/前进加载距离
LoadUpFn：， / /功能
LoadDownFn： / /功能如下
}，选项）；

如果（me.opts.loaddownfn！=）{
我element.append美元（+ me.opts.domdown.domrefresh +）；
我domdown = $（美元+我的选择。domdown。domclass）；
}

如果（me.opts.scrollarea = =赢）{
我scrollarea美元。美元=胜利；
我_scrollcontentheight = $ doc.height（）；
我_scrollwindowheight = doc.documentelement.clientheight；
{人}
我scrollarea = me.opts.scrollarea美元；
我_scrollcontentheight =我。$元{ 0 }。scrollheight；
我_scrollwindowheight =我element.height美元（）；
}

win.on美元（'resize，函数（）{（）{
如果（me.opts.scrollarea = =赢）{
我_scrollwindowheight = win.innerheight；
{人}
我_scrollwindowheight =我element.height美元（）；
}
}）；

我element.on美元（'touchstart功能（e）{
如果（！我。加载）{
FnTouches（E）；
FnTouchstart（E，我）；
}
}）；
我element.on美元（'touchmove功能（e）{
如果（！我。加载）{
FnTouches (E, me);
FnTouchmove（E，我）；
}
}）；
我element.on美元（'touchend，函数（）{（）{
如果（！我。加载）{
FnTouchend（我）；
}
}）；

我scrollarea.on美元（'scroll，函数（）{（）{
我_scrolltop =我scrollarea.scrolltop美元（）；
FnRecoverContentHeight（我）
如果（me.opts.threshold = = = {）
我_threshold = Math.floor（我domdown.height美元（）* 1 / 3）；
{人}
我_threshold = me.opts.threshold；
}
如果（me.opts.loaddownfn！=me.islockdown！me.loading！我_threshold！= 0（我_scrollcontentheight -我。_threshold）<=（我_scrollwindowheight +我。_scrolltop））{
fnloaddown（）；
}
}）；

功能fnloaddown（）{
me.direction =向上；
我domdown.html美元（我的选择。domdown。domload）；
me.loading =真；
Me.opts.loadDownFn（我）；
}
}；

功能fntouches（e）{
如果（！E.touches）{
e.touches = e.originalevent.touches；
}
}

功能fntouchstart（E，我）{
我_starty = e.touches { 0 }。pagey；
me.touchscrolltop =我scrollarea.scrolltop美元（）；
}

功能fntouchmove（E，我）{
我_cury = e.touches { 0 }。pagey；
我_movey =我。_cury -我。_starty；

如果（我_movey > 0）{
me.direction = DOWN；
} {如果别人（我_movey＜0）
me.direction =向上；
}

无功_absmovey = Math.abs（我_movey）；

如果（me.opts.loadupfn！=me.touchscrolltop <= 0 me.direction = = me.islockup { DOWN！）
E.preventDefault（）；

我domup = $（美元+我的选择。domup。domclass）；
如果（！我upinsertdom）{
我element.prepend美元（' '）；
me.upinsertdom =真；
}
fntransition（我domup美元，0）；
如果（_absmovey我。选择。距离）{
我_offsety = _absmovey；
我domup.html美元（我的选择。domup。domrefresh）；
如果别人}（_absmovey > me.opts.distance _absmovey < = { me.opts.distance×2）
我_offsety = me.opts.distance +（_absmovey -我。选择。距离）×0.5；
我domup.html美元（我的选择。domup。domupdate）；
{人}
我_offsety = me.opts.distance + me.opts.distance * 0.5 +（_absmovey - me.opts.distance×2）×0.2；
}
我domup.css美元（{ 'height：我_offsety }）；
}
}

/ / touchend
功能fntouchend（我）{
无功_absmovey = Math.abs（我_movey）；
如果（me.opts.loadupfn！=me.touchscrolltop <= 0 me.direction = = me.islockup { DOWN！）
fntransition（我domup美元，300）；

如果（_absmovey >我。选择。距离）{
我domup.css美元（{ 'height：我domup.children美元（）Height（）}）；
我domup.html美元（我的选择。domup。domload）；
me.loading =真；
Me.opts.loadUpFn（我）；
{人}
我domup.css美元（{ 'height'：‘0'}），（'webkittransitionend transitionend，函数（）{）{
me.upinsertdom = false；
美元（这个）；
}）；
}
我_movey = 0；
}
}

获取文档/高度
功能fnrecovercontentheight（我）{
如果（me.opts.scrollarea = =赢）{
我_scrollcontentheight = $ doc.height（）；
{人}
我_scrollcontentheight =我。$元{ 0 }。scrollheight；
}
}

mydropload.prototype.lock =功能（方向）{
我=这个；
如果（方向=未定义）{
如果（me.direction = =向上）{
me.islockdown =真；
否则如果}（me.direction = = Down）{
me.islockup =真；
{人}
me.islockup =真；
me.islockdown =真；
}
否则如果}（方向= =向上）{
me.islockup =真；
否则如果}（方向= = Down）{
me.islockdown =真；
}
}；

mydropload.prototype.unlock =函数（）{
我=这个；
me.islockup = false；
me.islockdown = false；
}；

mydropload.prototype.sethasdata =功能（ishasdata）{
我=这个；
如果（ishasdata）{
me.isdata =真；
我domdown.html美元（我的选择。domdown。domrefresh）；
FnRecoverContentHeight（我）；
{人}
me.isdata = false；
我domdown.html美元（我的选择。domdown。domnodata）；
FnRecoverContentHeight（我）；
}
}；

mydropload.prototype.resetload =函数（）{
我=这个；
如果（me.direction = = 'down'me。upinsertdom）{
我domup.css美元（{ 'height'：‘0'}），（'webkittransitionend moztransitionend transitionend，函数（）{）
me.loading = false；
me.upinsertdom = false；
美元（这个）；
FnRecoverContentHeight（我）；
}）；
否则如果}（me.direction = =向上）{
me.loading = false；
如果（我的数据）{
我domdown.html美元（我的选择。domdown。domrefresh）；
FnRecoverContentHeight（我）；
{人}
我domdown.html美元（我的选择。domdown。domnodata）；
}
}
}；

功能fntransition（DOM，努姆）{
Dom.css（{
转型：WebKit 'all' +数字+ 'ms，
过渡：' +数+ 'ms
}）；
}
}）（window.zepto | |窗口。jQuery）；

CSS：
dropload起来，
{ dropload下来。
背景颜色：# f0eff5；
职位：相对；
身高：0；
溢出：隐藏；
}

{ dropload下来。
身高：50px；
边境上：1px solid # e5e5e5；
}

dropload-refresh.drop-up-icon，
dropload-refresh.drop-down-icon，
dropload-update.drop-up-icon，
dropload-update.drop-down-icon {。
垂直对齐：文本底部；
右边距：3px；
身高：16px；
宽度：12px；
}

dropload-load.loading-icon {。
垂直对齐：中间；
身高：20px；
宽度：20px；
}

dropload刷新跨度，
dropload更新{跨度。
垂直对齐：中间；
行高：18px；
字体大小：16px；
颜色：# 585858；
}

{ dropload无效。
底部边框：1px solid # e5e5e5；
背景颜色：# ffffff；
}

dropload空{跨度。
行高：18px；
字体大小：14px；
颜色：# 999999；
}

dropload刷新，
dropload更新，
dropload负荷，
{ dropload无效。
位置：绝对；
宽度：100%；
身高：50px；
底部：0；
行高：50px；
文本对齐：中心；
}

dropload-down.dropload-refresh，
dropload-down.dropload-update，
dropload-down.dropload-load {。
顶部：0；
底部：汽车；
}
以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。