在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); })