Mobile touch event | pull up to load more, touch to load

Mobile touch event | pull up to load more, touch to load
Preface:

When it comes to project development, Baidu pulled up and down various mobile terminals due to the issue of loading more pages to achieve the paging effect.

To load more plug-ins. Then there is a pitfall: the user's wrong posture will occur during the pull-up and loading, for example, touchmove after a long press. (Ps: of course,

I don't think it's a plug-in problem. At that time, I thought there was a conflict with the referenced plug-in.) So I directly wrapped the touch event to load the plug-in to implement the paging function.

Note: At the end of the article, I will add some plug-ins for implementing this function.

Understanding touch events

In terms of applying touch events to pull and load more pages, we only use touchstart, touchmove, touchend, touchcancel events, and targetTouches [0].

And changedTouches [0] attribute to achieve simple paging effect.

To learn more about touch events, visit:

Https://developer.mozilla.org/zh-CN/docs/Web/API/Touch

Precautions for touch events

When executing the touch event, in most cases, we need to note that the browser's default behavior is blocked, such as rolling events or browser scaling. You can add meta tags to html pages to disable the event.

User Scaling: <meta name = "viewport" content = "width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no ">, and then

Add event. preventDefault () to the touch event to prevent the default event.

Code on

By using zepto, you can easily encapsulate touch events to pull and load more results.

1; (function ($, window, undefined) {2 var userDefinedSlide = {3 isSupportTouch: "ontouchstart" in document? True: false, 4 startPos :{}, // touchstart Location Information 5 endPos :{}, // touchmove location information 6 upOrDown: '', // up: for pull-up loading, down for pull-down refresh 7 winHigh: 0, // browser height, 8 docHigh: 0, // document height, corresponding to the total page height 9 scrollHigh: 0, // scroll height 10 notDefault: false, // whether to block the default behavior 11 // docHigh = winHigh + scrollHigh12 init: function () {13 if (! This. isSupportTouch) {14 console. warn ('touch events are not ororted at current device'); 15} else {16 this. touchEvents (); 17} 18}, 19 touchEvents: function () {20 var that = this; 21 $ ("body "). on ("touchstart", function (e) {22 var touch=e.tar getTouches [0]; 23 that. startPos = {24 x: touch. pageX, 25 y: touch. pageY, 26 time: + new Date () 27}; 28 that. winHigh = $ (window ). height (); // visible window height 29 that.doc High = $ (document ). height (); // total height 30 that. scrollHigh = $ (window ). scrollTop (); // scroll height 31}); 32 $ ("body "). on ("touchmove", function (e) {33 if (that. notDefault) {34 e. preventDefault (); 35} 36 var touch=e.tar getTouches [0]; 37 that. endPos = {38 x: touch. pageX, 39 y: touch. pageY, 40 time: + new Date () 41}; 42 that. upOrDown = that. endPos. y-that.startPos.y; 43}); 44 $ ("body "). on ("touchend touchcancel", function (e) {45 if (that. upOrDown <0 & that.doc High <= (that. winHigh + that. scrollHigh) {46 console. log ('is to bottom'); 47 // executable animation effect 48 setTimeout (function () {49 // The data location needs to be asynchronously loaded 50 // If the animation is executed, then, after loading the data, the animation effects will be removed: 51 }, 1000); 52} 53}) 54} 55}; 56 userDefinedSlide. init (); 57}) (Zepto, window, undefined );

The reason is that the Touch Location obtained by the touchmove event is still in the touchend/touchcancel event, so I have not studied it too much.

To obtain the touch position in the touchend/touchcancel event, you need to adjust var touch=e.tar getTouches [0] to var touch = e. changedTouches [0];

Because the touchend/touchcancel event does not have the targetTouches attribute and only has the changedTouches attribute.

Some people may wonder why we need to bind touchend and touchcancel events. Personal Events may find bugs in touchend events on some Android phones.

Execute, so the touchcancel event is triggered when the system stops tracking the touch to achieve the touchend effect.

Through simple encapsulation of touch events, I can pull up and load more pages.

More pull-up and load more pull-down and refresh plug-ins:

Dropload: https://github.com/ximan/dropload

IScroll: https://github.com/cubiq/iscroll

Swiper: https://github.com/nolimits4web/Swiper (ps: swiper can also achieve up-pull loading more)

Mescroll: http://www.mescroll.com/

 

In addition, I mentioned the bug in using plug-ins at the beginning of this article. If you have any idea, you can leave a message to me. Thank you again.