˵¶àÁ˶¼ÊÇÀᣬÔÚ½øÐÐÏîÄ¿¿ª·¢Ê±£¬ÔÚÉÏÀ¼ÓÔظü¶àʵÏÖ·ÖҳЧ¹ûµÄÎÊÌâÉÏ£¬ÓÉÓÚµ±Ê±¿ª·¢ÈÎÎñ½ô¼±£¬ËùÒԾͰٶÈÕÒÁ˸÷ÖÖÒƶ¯¶ËµÄÉÏÀÏÂÀ
ʵÏÖ¼ÓÔظü¶àµÄ²å¼þ¡£È»ºó¾ÍÁôÏÂÁ˸ö¿Ó£ºÉÏÀ¼ÓÔصÄʱºò»áÓÉÓÚÓû§´íÎóµÄ×ËÊÆ£¬ÀýÈ糤°´ºóÔÙtouchmoveµÈ»á³öÏÖ¿¨ËÀµÄ¼ÙÏó¡£(ps£ºµ±È»£¬
ÎÒ²»ÈÏΪÊDzå¼þµÄÎÊÌ⣬µ±Ê±µÄÏë·¨ÊǾõµÃÒýÓõIJå¼þ´æÔÚ³åÍ»)£¬ÓÚÊÇ£¬ÎÒ¾ÍÖ±½Óͨ¹ý·â×°touchʼþÍê³ÉÉÏÀ¼ÓÔØʵÏÖ·ÖÒ³µÄ¹¦ÄÜ¡£
±¸×¢£ºÎÄÕÂ×îºó»á¼ÓÉÏΪʵÏÖÕâ¸ö¹¦ÄÜÎÒÕÒµÄһЩ²å¼þ
Á˽âtouchʼþÔÚÓ¦ÓÃtouchʼþʵÏÖÉÏÀ¼ÓÔظü¶àʵÏÖ·ÖÒ³µÄЧ¹ûÉÏ£¬ÆäʵÎÒÃÇÓõ½µÄÖ»ÓÐtouchstart£¬touchmove£¬touchend£¬touchcancelʼþ£¬»¹ÓÐtargetTouches[0]
ºÍchangedTouches[0]ÊôÐÔ¼´¿ÉÍê³É¼òµ¥µÄ·ÖҳЧ¹û¡£
Á˽â¸ü¶àtouchʼþµÄ·½·¨¿ÉÒÔ·ÃÎÊ£º
https://developer.mozilla.org/zh-CN/docs/Web/API/Touch
touchʼþÐèҪעÒâÊÂÏîÔÚÖ´ÐÐtouchʼþµÄʱºò£¬ÔÚ´ó¶àÊýÇé¿öÏÂÎÒÃÇÐèҪעÒâµÄ¾ÍÊÇ×èÖ¹ä¯ÀÀÆ÷µÄĬÈÏÐÐΪ£¬ÀýÈç¹ö¶¯Ê¼þ»òÕßä¯ÀÀÆ÷µÄËõ·Å£¬¿ÉÒÔͨ¹ýhtmlÒ³Ãæ¼ÓÉÏmeta±êÇ©½ûÖ¹
Óû§Ëõ·Å£º<meta content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">£¬È»ºó
ÔÚtouchʼþÉϼÓÉÏevent.preventDefault()×èֹĬÈÏʼþ¡£
ÉÏ´úÂëͨ¹ý»ùÓÚzepto¼òµ¥µÄ·â×°ÁËtouchʼþÉÏÀ¼ÓÔظü¶àµÄЧ¹û¡£
1 ;(function ($,window,undefined) { 2 var userDefinedSlide={ 3 isSupportTouch:"ontouchstart" in document ? true :false, endPos:{},upOrDown:'',winHigh:0,docHigh:0,scrollHigh:0,notDefault:init:function(){ 13 if(!this.isSupportTouch){ 14 console.warn('touch events are not supported 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.targetTouches[0]; 23 that.startPos={ 24 x:touch.pageX, 25 y:touch.pageY, 26 time:+new Date() 27 }; that.docHigh=$(document).height();that.scrollHigh=$(window).scrollTop(); }); 32 $("body").on("touchmove",function (e) { 33 if(that.notDefault){ 34 e.preventDefault(); 35 } 36 var touch=e.targetTouches[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.docHigh<=(that.winHigh+that.scrollHigh)){ 46 console.log('is to bottom'); setTimeout(function(){ },1000); 52 } 53 }) 54 } 55 }; 56 userDefinedSlide.init(); 57 })( Zepto ,window,undefined);
¶ø»ùÓÚÊÇÔÚtouchmoveʼþÖ´ÐлñÈ¡´¥ÃþλÖû¹ÔÚtouchend/touchcancelʼþÖ´ÐлñÈ¡´¥ÃþλÖÃÔòÎÒûÓйý¶àµÄ¿¼¾¿¡£
ÒªÔÚtouchend/touchcancelʼþ»ñÈ¡´¥ÃþλÖõĻ°ÔòÐèÒª½«var touch=e.targetTouches[0];µ÷ÕûΪvar touch=e.changedTouches[0];
ÒòΪ£¬touchend/touchcancelʼþûÓÐtargetTouchesÊôÐÔ£¬Ö»ÓÐchangedTouchesÊôÐÔ¡£
¿ÉÄÜÓÐÈË´æÔÚÒÉ»ó£¬ÎªÉ¶Òª°ó¶¨touchendºÍtouchcancelÁ½¸öʼþÄØ£¬¸öÈËʼþ£¬·¢ÏÖÔÚ²¿·Ö°²×¿ÊÖ»úÉÏ»áÔÚtouchendʼþÉÏÓÐbug£¬²»ÄÜ
Ö´ÐУ¬ËùÒÔͨ¹ýÖ´ÐÐtouchcancelʼþ£ºµ±ÏµÍ³Í£Ö¹¸ú×Ù´¥ÃþµÄʱºò´¥·¢£¬À´´ïµ½touchendµÄЧ¹û¡£
ͨ¹ýÎÒÉÏÃæ¶ÔtouchʼþµÄ¼òµ¥·â×°¾Í¿ÉʵÏÖÉÏÀ¼ÓÔظü¶àʵÏÖ·ÖÒ³µÄЧ¹ûÁË¡£
¸ü¶àÉÏÀ¼ÓÔظü¶à¡¢ÏÂÀˢвå¼þ£ºdropload:https://github.com/ximan/dropload
iScroll:https://github.com/cubiq/iscroll
swiper:https://github.com/nolimits4web/Swiper(ps:swiperÒ²¿ÉʵÏÖÉÏÀ¼ÓÔظü¶à)
mescroll:
Áí£ºÎÒÎÄÕ¿ªÍ·Ìáµ½µÄʹÓòå¼þ´æÔÚµÄbug£¬ÓÐÖªµÀµÄ´óÉñ¿ÉÒÔÁôÑÔ¸øÎÒร¬ÔÙ´Îл¹ýÏÈÁË¡£
¡¡