移动端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