JS + CSS implement pull-down refresh/pull-up loading plug-in, jscss

JS + CSS implement pull-down refresh/pull-up loading plug-in, jscss

There is nothing left to worry about. I wrote a common jquery plug-in for pull-down refresh/pull-up loading. The code is recorded here. If you are interested in writing code as plug-ins and npm packages, you can leave a message.

URL: http://owenliang.github.io/pullToRefresh/

Project address: https://github.com/owenliang/pullToRefresh

Note:

When transition is used for animation, transform: translate is preferred to replace top. There is a problem with the smoothness of the latter animation.

Mobile browsers have different processing methods for gesture touch (listed below). However, the following solutions may invalidate the overflow: scroll of Some browsers, which is hard to be compatible in short:

Browser pull-down built-in rebound Animation: you can disable the default processing behavior of the document's touchmove event.

Google Chrome pull-down built-in refresh function: the touch-action: none attribute can be disabled.

To solve the above problem, I suggest that the iscroll5 plug-in should be used to simulate the implementation (non-overflow: scroll), and then the browser's default touchmove behavior will be disabled using the above method.

If transition has multiple attributes, the transitionend callback will be called once for each attribute. Therefore, if any of the attributes is called, the css and transitionend callbacks should be deleted.

The browser does not have the opportunity to re-paint the UI when executing JS Code. Therefore, when using transition, be sure to use setTimeout to delay the code for terminating the animation.

Post the code on the homepage. You are welcome to leave a message. You need to cooperate with a friend who is interested in the time, mainly to do two things:

1) Change the plug-in to the NPM package.

2) based on the pullToRefresh library, develop a left-side sliding UI similar to "toutiao.com.

PullToRefresh. js:

/*** Add a scroll bar for the specified container. the pull-down refresh and pull-up loading functions are supported. * @ param container: Specifies the container to be rolled. css: position must be set! = Static, height = * @ param option configuration item. For details, see defaultOption Description * @ return. The returned object is used to manipulate this region. The iscroll refresh function is currently exposed, when you add or delete content outside of the plug-in to the rolling area, you should take the initiative to call a * @ description ** 2017-03-29*1) Support pull-up loading * 1) change to jquery static function plug-in * 2) supports disabling pull-down refresh or pull-up loading */$. installPullToRefresh = function (container, option) {// start touch position var touchStartY = 0; // start icon position var pullStartY = 0; // current touch event var touchEvent = null; // The current refresh event var refreshEvent = Null; // The current icon position var curY =-55; // The current loading event var loadEvent = null; // default parameter var defaultOption ={// refresh related noRefresh: false, // close the pull-down refresh feature pauseBound: 40, // the position where the refresh is triggered (also the position where the loading icon is paused) lowerBound: 80, // The maximum number of px loadImg to be pulled down: "load.png", // loading image pullImg: "pull.png", // drop-down image onRefresh: function (refreshDone) {// refresh data callback setTimeout (function () {// refreshDone () ;}, 0) ;}by default, // load related noLoad: false, // Close the uploading feature bottomHeight: 1, // The number of pixels at the bottom of the scroll bar to initiate a refresh onLoad: function (loadDone) {setTimeout (function () {loadDone ();}, 0) ;},}; var finalOption = $. extend (true, defaultOption, option); // create the iscroll5 rolling area var iscroll = new IScroll (container, {bounce: false ,}); // disable the pull-on feature if (! FinalOption. noLoad) {// listens for the rolling end event, which is used to pull and load iscroll. on ('rollend', function () {// when a scroll bar exists, it is allowed to pull and load if (iscroll. maxScrollY <0) {// maxScrollY <0 indicates that the scroll bar var bottomDistance = (iscroll. maxScrollY-iscroll. y) *-1; // close enough to the bottom to trigger loading if (bottomDistance <= finalOption. bottomHeight) {// currently no refresh or load events are being executed if (! LoadEvent &&! RefreshEvent) {loadEvent ={}; // generate a new loading event finalOption. onLoad (function (error, msg) {loadEvent = null; // clear the current loading event // delay redraw the scroll bar setTimeout (function () {iscroll. refresh () ;}, 0) ;}}}}) ;}// close the pull-down refresh feature if (! FinalOption. noRefresh) {// near the scroll area, containing the refresh icon var pullContainer =iner ('<div class = "pullContainer"> </div> ') // create a small icon var pullToRefresh =$ ('<div class = "pullToRefresh">  </div>'); // keep the small icon shortcut var pullImg = pullToRefresh. find ("img"); // Add the small icon to the container pullContainer. append (pullToRefresh); // before the small icon container is added to the rolling area $ (container ). before (pullContainer); // pre-load loadImg $ (''); // sets the function cssTransform (node, content) {node.css ({'-webkit-transform': content, '-moz-transform': content, '-ms-transform': content, '-o-transform': content, 'transform': content ,});} // adjust the position and angle of the small icon, and the transparency function goTowards (translateY, rotate, opcaticy) {// update the position of the current small icon to obtain the css (transform, therefore, you can save curY = translateY for each change; // rotate the icon (rotate according to the proportion of arrival lowerBound, maximum Turn 1 circle) if (rotate = undefined) {rotate = (curY/finalOption. lowerBound) * 360;} // The transparency is calculated based on the pauseBound arrival ratio. if (opcaticy === undefined) {opcaticy = (curY/finalOption. pauseBound) * 1; if (opcaticy> 1) {opcaticy = 1 ;}// change the position and Rotation Angle cssTransform (pullToRefresh, "translateY (" + translateY + "px) translateZ (0) "+" rotateZ ("+ rotate +" deg) "); // change the transparency of the pullToRefresh.css (" opacity ", opcaticy );}/ /Enable the rebound animation function tryStartBackTranTop () {// start the rebound animation pullToRefresh. addClass ("backTranTop"); // determines whether to trigger refresh if (curY> = finalOption. pauseBound) {goTowards (finalOption. pauseBound); // starts to refresh the pullToRefresh when the rebound animation ends. on ('transitionend webkitTransitionEnd otransitionend', function (event) {// Since transitionend calls back each attribute once, only one if (event. originalEvent. propertyName = "transform") {// pause the animation pullToRefresh. remove Class ("backTranTop"); pullToRefresh. unbind (); // The transparency is reset to 1 goTowards (finalOption. pauseBound, undefined, 1); // switch the image to the loading graph pullImg. attr ("src", finalOption. loadImg); // because anamition will overwrite the transform, use the top temporary positioning element pullToRefresh. addClass ("loadingAnimation"); pullToRefresh.css ("top", finalOption. pauseBound + "px"); // callback to refresh the data, and the refreshEvent should be returned to verify finalOption. onRefresh (function (error, msg) {// when the user calls back the DOM Update. You need to notify iscroll to adjust the settings. (We recommend that you delay the execution, which involves the re-painting of the browser.) setTimeout (function () {iscroll. refresh () ;}, 0); // reset the angle and switch to the goTowards (finalOption. pauseBound); // cancel animation and reset top pullToRefresh. removeClass ("loadingAnimation"); pullToRefresh.css ("top", ""); // delay transition animation 100 milliseconds, giving the browser the opportunity to redraw setTimeout (function () {// switch to the pull graph pullImg. attr ("src", finalOption. pullImg); // restore the animation pullToRefresh. addClass ("backTranTop"); // refresh completed r EfreshEvent = null; // Bounce Back to Top goTowards (-55) ;}, 100) ;}}) ;}else {goTowards (-55 ); // refreshEvent = null at the top of the page; // The trigger condition is not met.} // The parent container registration drop-down event $ (container ). on ("touchstart", function (event) {// new touch event touchEvent ={}; // There is a refresh event in progress if (refreshEvent) {return ;} // a new refresh event if (iscroll. y <-1 * finalOption. lowerBound) {return;} // a new refresh event refreshEvent = touchEvent; touchSta RtY = event. originalEvent. changedTouches [0]. clientY; pullStartY = curY; // If so, disable the rebound animation and related listening pullToRefresh. removeClass ("backTranTop"); pullToRefresh. unbind (); // switch to the pull graph pullImg. attr ("src", finalOption. pullImg );}). on ("touchmove", function (event) {// touch before refresh is complete, if (touchEvent! = RefreshEvent) {return;} var touchCurY = event. originalEvent. changedTouches [0]. clientY; var touchDistance = touchCurY-touchStartY; // The distance from this movement var curPullY = pullStartY + touchDistance; // The position to which the calculated icon should be moved // The range of if (curPullY> finalOption cannot be pulled down. lowerBound) {curPullY = finalOption. lowerBound;} // up cannot pull out the range if (curPullY <=-55) {curPullY =-55;} // update the position of the icon goTowards (curPullY );}). on ("touchend", fu Nction (event) {// touch before refresh is complete. if (touchEvent! = RefreshEvent) {return ;}// try to start the rebound animation tryStartBackTranTop () ;}/// initialize iscroll setTimeout (function () {iscroll. refresh () ;}, 0); // return to the Tool Object return {// if the user modifies the content of the rolling area beyond the drop-down list, you need to actively call refresh: function () {// latency to redraw setTimeout (function () {iscroll with the browser. refresh () ;}, 0) ;}, // triggerPull: function () {// refreshing or disabling refresh if (refreshEvent | finalOption. noRefresh) {return false;} // pause the pullToRefresh animation that may be in the final stage. removeClass ("backTranTop"); // The small icon moves to the lowerbound position goTowards (finalOption. lowerBound); // create a new refresh event. The pitfall can prevent the touch before setTimeout from causing refreshEvent ={}; // delay to the browser re-painting setTimeout (function () {tryStartBackTranTop () ;}, 100) ;},}; Contact GitHub API Training Shop Blog About©2017 GitHub, Inc. Terms Privacy Security Status Help

PullToRefresh.css:

. PullToRefresh {position: absolute; left: 0; right: 0; margin: auto; width: 50px; height: 50px; z-index: 10; opacity: 1; transform: translateY (-55px) translateZ (0) rotateZ (0deg);-ms-transform: translateY (-55px) translateZ (0) rotateZ (0deg ); /* IE 9 */-moz-transform: translateY (-55px) translateZ (0) rotateZ (0deg);/* Firefox */-webkit-transform: translateY (-55px) translateZ (0) rotateZ (0deg);/* Safari and Chrome */-o-transform: translateY (-55px) translateZ (0) rotateZ (0deg ); /* Opera */}. backTranTop {transition: transform 0.8 s loading, opacity 0.8 s loading;-moz-transition: transform 0.8 s loading, opacity 0.8 s loading;/* Firefox 4 */-webkit-transition: transform 0.8 s transition, opacity 0.8 s transition;/* Safari and Chrome */-o-transition: transform 0.8 s transition, opacity 0.8 s transition;/* Opera */}. pullContainer {position: relative ;}. pullToRefresh img {display: block; width: 40px; height: 40px;/* center the img. in pullToRefresh, */position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;}/* loading rotation animation */. loadingAnimation {animation: loadingFrame 1 s infinite;-moz-animation: loadingFrame 1 s infinite;/* Firefox */-webkit-animation: loadingFrame 1 s infinite; /* Safari and Chrome */-o-animation: loadingFrame 1 s infinite;/* Opera */} @ keyframes loadingFrame {from {transform: rotateZ (360deg );} to {transform: rotateZ (0deg) ;}@-moz-keyframes loadingFrame/* Firefox */{from {transform: rotateZ (360deg);} to {transform: rotateZ (0deg); }}@-webkit-keyframes loadingFrame/* Safari and Chrome */{from {transform: rotateZ (360deg);} to {transform: rotateZ (0deg); }}@-o-keyframes loadingFrame/* Opera */{from {transform: rotateZ (360deg);} to {transform: rotateZ (0deg );}}

The above is a small series of JS + CSS implementation pull-down refresh/pull-up loading plug-ins, I hope to help you, if you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!