移动端翻页插件dropload.js（支持Zepto和jQu... - 分享生活和学习中的点点滴滴

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

前端技术 2023/09/03 JavaScript

dropload.js提供了最基本的上拉翻页，下拉刷新功能。对于由服务端一次返回所有数据的情况基本通用。
但是，需求往往不是服务端一次性返回所有数据，往往还要支持服务端分页，搜索，排序，多条件筛选等功能。（比较类似美团美食的界面）

一、解决方案

改进1：由于有分页，搜索，排序，多条件筛选功能，可能都不需要上拉，进到页面就没有数据。
例如：搜索一个服务端不存在的名字。
所以，添加接口设置setHasData。

MyDropLoad.prototype.setHasData = function(ishasData) {
  var me = this;
  if (ishasData) {
   me.isData = true;
   me.$domDown.html(me.opts.domDown.domRefresh);
   fnRecoverContentHeight(me);
  } else {
   me.isData = false;
   me.$domDown.html(me.opts.domDown.domNoData);
   fnRecoverContentHeight(me);
  }
 };

改进2：由以上问题还引发了一个bug，选择不同的筛选条件，然后上拉加载更多，此时没有反应了。
原因较复杂，举例说明：选择不同的筛选条件，数据量不一样，如果不执行resetload，那么页面的的上拉计算距离就存在问题。
1. 只要发API到服务端，无论返回成功失败，都必须执行resetload，成功时需要在加载完全部新增的数据后resetload。
2. 更改resetload如下，添加调用计算屏幕尺寸的方法。

MyDropLoad.prototype.resetload = function() {
  var me = this;
  if (me.direction == \'down\' && me.upInsertDOM) {
   me.$domUp.css({ \'height\': \'0\' }).on(\'webkitTransitionEnd mozTransitionEnd transitionend\', function() {
    me.loading = false;
    me.upInsertDOM = false;
    $(this).remove();
    fnRecoverContentHeight(me);
   });
  } else if (me.direction == \'up\') {
   me.loading = false;
   if (me.isData) {
    me.$domDown.html(me.opts.domDown.domRefresh);
    fnRecoverContentHeight(me);
   } else {
    me.$domDown.html(me.opts.domDown.domNoData);
   }
  }
 }

3. 解决以上两个问题，基本解决了90%的问题，还有一个是setHasData(false)之后的处理。（假设每页的count时20条）
bug: 在筛序条件1：返回20条数据，上拉加载更多返回10条数据，此时设置setHasData(false)。选择筛选条件2，返回20条数据，上拉加载，你会惊奇的发现拉不动了。
why: setHasData(false)之后状态还停留在没有更多数据的状态。此时应该锁定了上拉加载，更改筛选条件后，没有解除锁定，所以不能上拉加载了。
解决方法：每次更改搜索条件，筛选条件，排序等时，都需要设置setHasData(true)。

二、调用方法
整体页面逻辑较复杂。这里在整体解释一遍。
1. 选择要上拉加载的DIV，添加调用方法。
注意事项：
（1）记得保存返回对象。
（2）LoadDownFn时上拉加载后的回调，这里自己要处理的逻辑。我这里时翻页发API，API参数中offset加20，然后发API。
（3）无论API返回失败成功，都必须resetload。
这里强调：
fetchData函数调用发API，失败或者成功都必须self.moreFund.resetload()。
并且失败时直接调用self.moreFund.resetload()即可。成功时要在新的数据返回后，要先用JS动态加载HTML，加载完成后在执行self.moreFund.resetload()。

self.moreFund = $(\'#table-fundlist\').dropload({
 scrollArea: window,
 domDown: {
  domClass: \'dropload-down\',
  domRefresh: \'<div class=\"dropload-refresh\"><img class=\"drop-up-icon\" src=\"images/dropload_up.png\"><span>上拉加载更多</span></div>\',
  domLoad: \'<div class=\"dropload-load\"><img class=\"loading-icon\" src=\"images/droploading.gif\"></div>\',
  domNoData: \'\'
 },
 loadDownFn: function() {
  self.apiParams.offset += 20;
  self.fetchData(true);
 }
});

2. setHasData详解
（1）什么时候需要设置true。
当非翻页API触发之前。即选择新的筛选条件，选择新的搜索字段，选择新的排序字段。这个时候必须setHasData(true)。
this.moreFund.setHasData(true);
（2）什么时候设置false。
服务端返回数据后，比较服务端返回的条目数与API发送的条目数是否一致，不一致设置setHasData(false)。

 if (data.length < this.apiParams.count){      
 this.moreFund.setHasData(false);
 this.moreFund.lock();
}

3. lock与unlock详解
（1）什么时候设置lock。
服务端返回数据后，比较服务端返回的条目数与API发送的条目数是否一致，不一致设置lock()。
当前页面状态不需要上拉加载时需要设置lock()。例如：在搜索框输入的状态。
（2）什么时候设置unlock。
只有一个地方需要调用。发送API之前设置unlock。

if (self.moreFund) {
 self.moreFund.unlock();
}

三、JS和CSS源代码

js:

(function($) {
 \'use strict\';
 var win = window;
 var doc = document;
 var $win = $(win);
 var $doc = $(doc);
 $.fn.dropload = function(options) {
  return new MyDropLoad(this, options);
 };
 var MyDropLoad = function(element, options) {
  var me = this;
  me.$element = $(element);
  me.upInsertDOM = false;
  me.loading = false;
  me.isLockUp = false;
  me.isLockDown = false;
  me.isData = true;
  me._scrollTop = 0;
  me.init(options);
 };
 MyDropLoad.prototype.init = function(options) {
  var me = this;
  me.opts = $.extend({}, {
   scrollArea: me.$element,
   domUp: {
    domClass: \'dropload-up\',
    domRefresh: \'<div class=\"dropload-refresh\"><img class=\"drop-down-icon\" src=\"../images/dropload_down.png\"><span>下拉刷新</span></div>\',
    domUpdate: \'<div class=\"dropload-update\"><img class=\"drop-up-icon\" src=\"../images/dropload_up.png\"><span>释放更新</span></div>\',
    domLoad: \'<div class=\"dropload-load\"><img class=\"loading-icon\" src=\"../images/droploading.gif\"></div>\'
   },
   domDown: {
    domClass: \'dropload-down\',
    domRefresh: \'<div class=\"dropload-refresh\"><img class=\"drop-up-icon\" src=\"../images/dropload_up.png\"><span>上拉加载更多</span></div>\',
    domLoad: \'<div class=\"dropload-load\"><img class=\"loading-icon\" src=\"../images/droploading.gif\"></div>\',
    domNoData: \'\'
     //domNoData : \'<div class=\"dropload-noData\"><span>暂无数据</span></div>\'
   },
   distance: 50, // 拉动距离
   threshold: \'\', // 提前加载距离
   loadUpFn: \'\', // 上方function
   loadDownFn: \'\' // 下方function
  }, options);

  if (me.opts.loadDownFn != \'\') {
   me.$element.append(\'<div class=\"\' + me.opts.domDown.domClass + \'\">\' + me.opts.domDown.domRefresh + \'</div>\');
   me.$domDown = $(\'.\' + me.opts.domDown.domClass);
  }

  if (me.opts.scrollArea == win) {
   me.$scrollArea = $win;
   me._scrollContentHeight = $doc.height();
   me._scrollWindowHeight = doc.documentElement.clientHeight;
  } else {
   me.$scrollArea = me.opts.scrollArea;
   me._scrollContentHeight = me.$element[0].scrollHeight;
   me._scrollWindowHeight = me.$element.height();
  }

  $win.on(\'resize\', function() {
   if (me.opts.scrollArea == win) {
    me._scrollWindowHeight = win.innerHeight;
   } else {
    me._scrollWindowHeight = me.$element.height();
   }
  });

  me.$element.on(\'touchstart\', function(e) {
   if (!me.loading) {
    fnTouches(e);
    fnTouchstart(e, me);
   }
  });
  me.$element.on(\'touchmove\', function(e) {
   if (!me.loading) {
    fnTouches(e, me);
    fnTouchmove(e, me);
   }
  });
  me.$element.on(\'touchend\', function() {
   if (!me.loading) {
    fnTouchend(me);
   }
  });

  me.$scrollArea.on(\'scroll\', function() {
   me._scrollTop = me.$scrollArea.scrollTop();
   fnRecoverContentHeight(me)
   if (me.opts.threshold === \'\') {
    me._threshold = Math.floor(me.$domDown.height() * 1 / 3);
   } else {
    me._threshold = me.opts.threshold;
   }
   if (me.opts.loadDownFn != \'\' && !me.loading && !me.isLockDown && me._threshold != 0 && (me._scrollContentHeight - me._threshold) <= (me._scrollWindowHeight + me._scrollTop)) {
    fnLoadDown();
   }
  });

  function fnLoadDown() {
   me.direction = \'up\';
   me.$domDown.html(me.opts.domDown.domLoad);
   me.loading = true;
   me.opts.loadDownFn(me);
  }
 };

 function fnTouches(e) {
  if (!e.touches) {
   e.touches = e.originalEvent.touches;
  }
 }

 function fnTouchstart(e, me) {
  me._startY = e.touches[0].pageY;
  me.touchScrollTop = me.$scrollArea.scrollTop();
 }

 function fnTouchmove(e, me) {
  me._curY = e.touches[0].pageY;
  me._moveY = me._curY - me._startY;

  if (me._moveY > 0) {
   me.direction = \'down\';
  } else if (me._moveY < 0) {
   me.direction = \'up\';
  }

  var _absMoveY = Math.abs(me._moveY);

  if (me.opts.loadUpFn != \'\' && me.touchScrollTop <= 0 && me.direction == \'down\' && !me.isLockUp) {
   e.preventDefault();

   me.$domUp = $(\'.\' + me.opts.domUp.domClass);
   if (!me.upInsertDOM) {
    me.$element.prepend(\'<div class=\"\' + me.opts.domUp.domClass + \'\"></div>\');
    me.upInsertDOM = true;
   }
   fnTransition(me.$domUp, 0);
   if (_absMoveY <= me.opts.distance) {
    me._offsetY = _absMoveY;
    me.$domUp.html(me.opts.domUp.domRefresh);
   } else if (_absMoveY > me.opts.distance && _absMoveY <= me.opts.distance * 2) {
    me._offsetY = me.opts.distance + (_absMoveY - me.opts.distance) * 0.5;
    me.$domUp.html(me.opts.domUp.domUpdate);
   } else {
    me._offsetY = me.opts.distance + me.opts.distance * 0.5 + (_absMoveY - me.opts.distance * 2) * 0.2;
   }
   me.$domUp.css({ \'height\': me._offsetY });
  }
 }

 // touchend
 function fnTouchend(me) {
  var _absMoveY = Math.abs(me._moveY);
  if (me.opts.loadUpFn != \'\' && me.touchScrollTop <= 0 && me.direction == \'down\' && !me.isLockUp) {
   fnTransition(me.$domUp, 300);

   if (_absMoveY > me.opts.distance) {
    me.$domUp.css({ \'height\': me.$domUp.children().height() });
    me.$domUp.html(me.opts.domUp.domLoad);
    me.loading = true;
    me.opts.loadUpFn(me);
   } else {
    me.$domUp.css({ \'height\': \'0\' }).on(\'webkitTransitionEnd transitionend\', function() {
     me.upInsertDOM = false;
     $(this).remove();
    });
   }
   me._moveY = 0;
  }
 }

 // 重新获取文档高度
 function fnRecoverContentHeight(me) {
  if (me.opts.scrollArea == win) {
   me._scrollContentHeight = $doc.height();
  } else {
   me._scrollContentHeight = me.$element[0].scrollHeight;
  }
 }

 MyDropLoad.prototype.lock = function(direction) {
  var me = this;
  if (direction === undefined) {
   if (me.direction == \'up\') {
    me.isLockDown = true;
   } else if (me.direction == \'down\') {
    me.isLockUp = true;
   } else {
    me.isLockUp = true;
    me.isLockDown = true;
   }
  } else if (direction == \'up\') {
   me.isLockUp = true;
  } else if (direction == \'down\') {
   me.isLockDown = true;
  }
 };

 MyDropLoad.prototype.unlock = function() {
  var me = this;
  me.isLockUp = false;
  me.isLockDown = false;
 };

 MyDropLoad.prototype.setHasData = function(ishasData) {
  var me = this;
  if (ishasData) {
   me.isData = true;
   me.$domDown.html(me.opts.domDown.domRefresh);
   fnRecoverContentHeight(me);
  } else {
   me.isData = false;
   me.$domDown.html(me.opts.domDown.domNoData);
   fnRecoverContentHeight(me);
  }
 };

 MyDropLoad.prototype.resetload = function() {
  var me = this;
  if (me.direction == \'down\' && me.upInsertDOM) {
   me.$domUp.css({ \'height\': \'0\' }).on(\'webkitTransitionEnd mozTransitionEnd transitionend\', function() {
    me.loading = false;
    me.upInsertDOM = false;
    $(this).remove();
    fnRecoverContentHeight(me);
   });
  } else if (me.direction == \'up\') {
   me.loading = false;
   if (me.isData) {
    me.$domDown.html(me.opts.domDown.domRefresh);
    fnRecoverContentHeight(me);
   } else {
    me.$domDown.html(me.opts.domDown.domNoData);
   }
  }
 };

 function fnTransition(dom, num) {
  dom.css({
   \'-webkit-transition\': \'all \' + num + \'ms\',
   \'transition\': \'all \' + num + \'ms\'
  });
 }
})(window.Zepto || window.jQuery);

CSS:

.dropload-up,
.dropload-down {
 background-color: #F0EFF5;
 position: relative;
 height: 0;
 overflow: hidden;
}

.dropload-down {
 height: 50px;
 border-top: 1px solid #e5e5e5;
}

.dropload-refresh .drop-up-icon,
.dropload-refresh .drop-down-icon,
.dropload-update .drop-up-icon,
.dropload-update .drop-down-icon {
 vertical-align: text-bottom;
 margin-right: 3px;
 height: 16px;
 width: 12px;
}

.dropload-load .loading-icon {
 vertical-align: middle;
 height: 20px;
 width: 20px;
}

.dropload-refresh span,
.dropload-update span {
 vertical-align: middle;
 line-height: 18px;
 font-size: 16px;
 color: #585858;
}

.dropload-noData {
 border-bottom: 1px solid #e5e5e5;
 background-color: #FFFFFF;
}

.dropload-noData span {
 line-height: 18px;
 font-size: 14px;
 color: #999999;
}

.dropload-refresh,
.dropload-update,
.dropload-load,
.dropload-noData {
 position: absolute;
 width: 100%;
 height: 50px;
 bottom: 0;
 line-height: 50px;
 text-align: center;
}

.dropload-down .dropload-refresh,
.dropload-down .dropload-update,
.dropload-down .dropload-load {
 top: 0;
 bottom: auto;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持phpstudy。

本文地址：https://www.stayed.cn/item/7400

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请联系我

微信
QQ好友
QQ空间
腾讯微博
新浪微博
人人网

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案

2024-02(2)
2023-06(1)
2023-05(1)
2023-04(14)
2023-03(3)
2023-01(6)
2022-12(5)
2022-11(5)
2022-07(2)
2022-06(4)
2022-05(3)
2022-03(1)
2021-12(6)
2021-11(1)
2021-10(3)
2021-09(5)
2021-07(5)
2021-02(2)
2021-01(7)
2020-12(18)
2020-11(14)
2020-10(12)
2020-09(10)
2020-08(22)
2020-07(2)
2020-06(1)
2020-04(5)
2020-03(9)
2020-02(7)
2020-01(9)
2019-12(8)
2019-11(10)
2019-10(11)
2019-09(17)
2019-08(16)
2019-07(6)
2019-06(3)
2019-04(1)
2019-03(8)
2019-02(5)
2019-01(1)
2018-11(2)
2018-10(3)
2018-09(1)
2018-08(3)
2018-07(3)
2018-06(7)
2018-04(4)
2018-03(5)
2018-02(4)
2018-01(22)
2017-12(3)
2017-11(5)
2017-10(15)
2017-09(26)
2017-08(1)
2017-07(3)