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

时间：2021-03-16 23:32:52

一. 声明

　　代码来源：github上的dropload项目。

二. 问题

　　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="data:images/dropload_up.png"><span>上拉加载更多</span></div>',

    domLoad: '<div class="dropload-load"><img class="loading-icon" src="data: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源代码

;

(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);
.dropload-up,

.dropload-down {

  background-color: #F0EFF5;

  position: relative;

  height:;

  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:;

  line-height: 50px;

  text-align: center;

}

.dropload-down .dropload-refresh,

.dropload-down .dropload-update,

.dropload-down .dropload-load {

  top:;

  bottom: auto;

}

相关文章