Mobile Touch Events | | Pull up load more

Objective:

Said more are tears, in the project development, in the pull load more to achieve paging effect on the issue, due to the development of the task urgently, so Baidu found a variety of mobile end pull down

Implementation to load more plugins. Then left a pit: pull-up loading will be due to the user's wrong posture, such as long press and then Touchmove will appear the illusion of death. (PS: Of course,

I don't think it's a plugin problem, and the idea was that there was a conflict with the plugin, so I just finished the pull-up load by encapsulating the touch event to realize paging.

Note: At the end of this article, I will add some plugins for this function.

Understanding Touch Events

In the application of touch event implementation pull-up load more to achieve the effect of paging, in fact, we use only Touchstart,touchmove,touchend,touchcancel event, and Targettouches[0]

and Changedtouches[0] properties to complete a simple paging effect.

Learn more about how touch events can be accessed by:

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

Touch events need to be taken into consideration

In most cases, when performing a touch event, we need to be aware that blocking the browser's default behavior, such as scrolling events or browser scaling, can be prevented by adding meta tags to HTML pages

User zoom: <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 block the default event.

On the Code

The touch event pull-up loads more effects by using the Zepto simple wrapper.

1;(function($,window,undefined) {2         varUserdefinedslide={3Issupporttouch: "Ontouchstart"inchDocument?true:false,4startpos:{},//Touchstart's Location information5endpos:{},//Touchmove's Location information6Upordown: ",//up: For pull-up loading, down for drop-down refresh7winhigh:0,//the height of the browser,8dochigh:0,//the height of the document, corresponding to the total height of the page9scrollhigh:0,//the height of the scrollTenNotdefault:false,//whether to block default behavior One             //Dochigh=winhigh+scrollhigh AInit:function(){ -                 if(! This. Issupporttouch) { -Console.warn (' Touch events ' is not supported @ Current device '); the}Else{ -                      This. touchevents (); -                 } -             }, +Touchevents:function(){ -                 varthat= This; +$ ("Body"). On ("Touchstart",function(e) { A                     varTouch=e.targettouches[0]; atthat.startpos={ - X:touch.pagex, - Y:touch.pagey, -time:+NewDate () -                     }; -that.winhigh=$ (window). Height ();//Visible Window Height inthat.dochigh=$ (document). Height ();//Total Height -that.scrollhigh=$ (window). scrolltop ();//scrolling Height to                 }); +$ ("Body"). On ("Touchmove",function(e) { -                     if(that.notdefault) { the E.preventdefault (); *                     } $                     varTouch=e.targettouches[0];Panax Notoginsengthat.endpos={ - X:touch.pagex, the Y:touch.pagey, +time:+NewDate () A                     }; thethat.upordown=that.endpos.y-That.startpos.y; +                 }); -$ ("Body"). On ("Touchend Touchcancel",function(e) { $                     if(That.upordown < 0 && that.dochigh<= (that.winhigh+That.scrollhigh)) { $Console.log (' is to bottom '); -                         //Perform animation effects -SetTimeout (function(){ the                             //need to load data drop locations asynchronously -                             //If animation is performed, the animation is removed after the data is loadedWuyi},1000); the                     } -                 }) Wu             } -         }; About userdefinedslide.init (); $}) (Zepto, window,undefined);

And based on the Touchmove event execution get touch location also in Touchend/touchcancel event execution get touch position I'm not overly sophisticated.

To get the touch position in the Touchend/touchcancel event, Var touch=e.targettouches[0] is required, and the Var touch=e.changedtouches[0] is adjusted;

Because the Touchend/touchcancel event has no targettouches property, only the Changedtouches property.

There may be some doubts, why to bind Touchend and Touchcancel two events, personal events, found in some Android phones on the Touchend event has a bug, can not

executed, so by executing the Touchcancel event: When the system stops tracking touch, it triggers to achieve touchend effect.

With the simple encapsulation of the touch event, the pull-up load can be implemented more effectively for paging.

More pull-up load more, drop-down refresh plugin:

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

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

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

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

Another: My article at the beginning of the use of plug-ins exist bug, have to know the big God can leave a message to me Oh, again thanked first.

Mobile Touch Events | | Pull up load more