Mobile End-page plugin dropload.js (support for Zepto and jquery) _javascript tips

Dropload.js provides the most basic pull-through page, down-pull refresh feature. It is generally common for all data to be returned by the service side at once.
However, the requirements are often not the server to return all the data at once, often also to support the service end paging, search, sorting, and many other features of the filter. (more like the American Food interface)

First, the solution

Improvement 1: Because there are paging, search, sorting, multiple conditions filtering function, may not need to pull, into the page there is no data.
For example, search for a name that does not exist on a service side.
So, add interface settings 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);
  }
 ; 

Improvement 2: by the above problem also raises a bug, select different filter criteria, and then pull load more, at this time no response.
The reason is more complicated, for example: choose different filter conditions, the amount of data is not the same, if you do not perform resetload, then the page's pull calculation distance there is a problem.
1. As long as the API to the server, regardless of successful return failure, must perform resetload, the success of the need to load all the new data after the resetload.
2. Change Resetload as follows, add a method that invokes the calculation of screen size.

 MyDropLoad.prototype.resetload = function () {var me = this; if (me.direction = = "Down" && me.upinsertdom) {me. $domUp. css ({' height ': ' 0 '}). On (' Webkittransitionend Moztra
    Nsitionend 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. Solve the above two problems, basically solve the problem of 90%, there is a sethasdata (false) after the processing. (Suppose 20 per page count)
BUG: set Sethasdata (False) when the screen order condition 1: Returns 20 data, the pull loads more returns 10 data. Select filter Condition 2, return 20 data, pull up load, you will be surprised to find the pull does not move.
Why: Sethasdata (false) the state remains in a state with no more data. The pull load should be locked at this time, and after changing the filter condition, there is no unlock, so it cannot be pulled up.
Workaround: You need to set Sethasdata (true) each time you change your search criteria, filter criteria, sort, and so on.

Second, call the method
Overall page logic is more complex. Explained here in the whole again.
1. Select the div you want to pull up and add the calling method.
Precautions :
(1) Remember to save the returned object.
(2) Loaddownfn when the pull back after loading, here itself to deal with the logic. I'm here when the page is Api,api parameter offset plus 20, and then send the API.
(3) Regardless of the API return failure success, must be resetload.
Here the emphasis:
Fetchdata function calls the API, failure or success must be self.moreFund.resetload ().
And you can call Self.moreFund.resetload () directly when you fail. Success in the new data to return after the first to use JS dynamic loading of HTML, loading completed after the execution of Self.moreFund.resetload ().

Self.morefund = $ (' #table-fundlist '). Dropload ({
 Scrollarea:window,
 domdown: {
  domclass: ') Dropload-down ',
  domrefresh: ' <div class= "Dropload-refresh" ><span> Pull load More </span></div>",
  domload: ' <div class= ' dropload-load ' ></div> ',
  domnodata: '
 },
 Loaddownfn:function () {
  self.apiParams.offset = +;
  Self.fetchdata (True);
 }
); 

2. Sethasdata detailed
(1) When you need to set true.
Before the page-flipping API triggers. That is, select the new filter criteria, select the new Search field, and select the new sort field. This time must be Sethasdata (true).
This.moreFund.setHasData (TRUE);
(2) when to set false.
After the server returns data, compare the number of entries returned by the server with the number of entries sent by the API, inconsistent setting Sethasdata (false).

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

3. Lock and Unlock detailed
(1) When to set lock.
After the server returns data, the comparison of the number of entries returned by the service side is consistent with the number of entries sent by the API, and the inconsistency is set to lock ().
The current page state needs to be set to lock () without a pull load. For example: The state entered in the search box.
(2) When to set up unlock.
There is only one place to call. Set unlock before sending the API.

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

Three, JS and CSS source code

Js:

(function ($) {' Use strict ';
 var win = window;
 var doc = document;
 var $win = $ (win);
 var $doc = $ (DOC);
 $.fn.dropload = function (options) {return to 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 CLA ss= "Dropload-refresh" "><span> dropdown refresh </span></div>", Domupdate: ' <div class= ' Dropload-update "><span> release update </span></div>", Domload: ' <div class= ' dropload-load ' ></div>"}, Domdown: {domclass: ' Dropload-down ', Domrefresh: ' <div clas s= "Dropload-refresh" "><span> Pull load More </span></div>", Domload: ' <div class= ' dropload-load ' ></div>", Domnodata: '//domnodata: ' <div class= ' dropload-nodata ' ><sp An> no Data </span></div> '}, distance:50,//Pull distance threshold: ',//Advance load distance LOADUPFN: ',//above Func

  tion LOADDOWNFN: "//Below function}, options); if (me.opts.loadDownFn!= ') {me. $element. Append (' <div class= "' + Me.opts.domDown.domClass + '" > ' + me.opts.dom
   Down.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.di
    Stance + (_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 = f
     Alse;
    $ (this). Remove ();
   });
  } me._movey = 0; }//re-acquire document height 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 Moztra
    Nsitionend 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;
 }

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.