移動端touchstart、touchmove事件的基本使用

在pc端，我們通常使用$(window).scroll()事件來監聽元素的位置，來做一些入場動效，如：

$(window).scroll(function(){
     var panel3Move = document.getElementById('panel3').offsetTop <= ($(window).scrollTop() + 656);
     panel3Move && move('.panel1-man .man2').set('opacity', '1').duration('2.8s').end();
}

那么在移動端開發中，也經常有手指滑動時做相關處理的需求，如 下滑時導航條吸頂、上滑時又恢復原態，下拉刷新、上拉加載更多等等..  可是window對象的scroll事件在移動端有個致命的缺點：“必須手指松開才能觸發”！，用戶體驗非常差勁，幸運的是移動端提供了touch系列事件，問題也就迎刃而解了..

 

思路：開啟touchStart、touchMove或者touchEnd的事件監聽，當手指按下的時候記錄初始位置，再根據滑動后的位置做減法，即可以判斷上滑/下滑，再處理相應的業務邏輯

代碼片段：

　　　　　options: {
            startX: null,
            startY: null
        },
        
        touchStart: function(event){
            var self = touchMain;
            try{
                var touch = event.touches[0], //獲取第一個觸點
                    x = Number(touch.pageX), //頁面觸點X坐標
                    y = Number(touch.pageY); //頁面觸點Y坐標
                //記錄觸點初始位置
                self.options.startX = x;
                self.options.startY = y;
            }catch(e){
                console.log(e.message)
            }
        },
        
        /**
         * 滑動時判斷下滑、上滑
         * @param  {[type]} event        
         * @param  {[type]} upcallback   [上滑回調函數]
         * @param  {[type]} downcallback [下滑回調函數]
         */
        touchMove: function(event,upcallback,downcallback){
            var self = touchMain;
            try{
                var touch = event.touches[0], //獲取第一個觸點
                    x = Number(touch.pageX), //頁面觸點X坐標
                    y = Number(touch.pageY); //頁面觸點Y坐標
                
                //判斷滑動方向
                if (y - self.options.startY > 0) {
                    //console.log('下滑了！');
                    downcallback && downcallback();
                }else{
                    //alert('上滑了！');
                    upcallback && upcallback();
                }
            }catch(e){
                console.log('滑動時出錯:',e.message)
            }
        },

 

使用：

　　　　　　//下滑顯示、上滑隱藏
            require(['touch'],function(){
                var $getTicktImgSection = $('#getTicktImgSection');
                document.addEventListener('touchstart',window.touchMain.touchStart,false);
                document.addEventListener('touchmove',function(event){
                    window.touchMain.touchMove(event,function(){//上滑
                        $getTicktImgSection.css({'right':'-800px'})
                    },function(){//下滑
                        $getTicktImgSection.css({'right':'1em'})
                    })
                },false);
            })

 

完整代碼：https://github.com/helijun/component/tree/master/touch