移动端左右滚动导航，以及解决微信端不支持滚动导航touchmove的问题代码实例

今天开发一个移动端的左右滚动导航，用到了touchmove属性。本地测试没问题，放在移动端的浏览器也没问题，微信开发工具里也没有问题，但是放在微信公众号里打开之后，滑动效果不起作用。从网上找了一下解决办法，原来是要在touchmove方法里先调用一下event.preventDefault();。至于原因就不说了，大家可以去百度。下面为大家附上代码：

这是修改前的代码：

//左右滑动导航
		$(function(){
		$(".nav-list").on('touchstart',function(e){
			//获取滑动前的位置
		    startX = e.originalEvent.changedTouches[0].pageX;
		});
		$(".nav-list").on("touchmove",function(e){
			//获取滑动屏幕后的位置
		    endX = e.originalEvent.changedTouches[0].pageX;
		    //获取滑动距离
		    distanceX = endX-startX;
		    //判断滑动方向
		    if(distanceX>0){
		    	//向右滑动
		       // $(".nav-list li:first-child").css("margin-left","0");
				$(".nav-list li:first-child").animate({marginLeft:""},120);
		    }else if(distanceX<0){
		    	//向左滑动
		       //$(".nav-list li:first-child").css("margin-left","-105%");
		       $(".nav-list li:first-child").animate({marginLeft:"-105%"},120);
		    }

		});
		
		});

这是修改后的代码：

//左右滑动导航
		$(function(){
		$(".nav-list").on('touchstart',function(e){
			//获取滑动前的位置
		    startX = e.originalEvent.changedTouches[0].pageX;
		});
		$(".nav-list").on("touchmove",function(e){
		//解决微信端不支持touchmove
		e.preventDefault();
		//**********获取滑动屏幕后的位置*********** 
		    endX = e.originalEvent.changedTouches[0].pageX;
		    //获取滑动距离
		    distanceX = endX-startX;
		    //判断滑动方向
		    if(distanceX>0){
		    	//向右滑动
		       // $(".nav-list li:first-child").css("margin-left","0");
				$(".nav-list li:first-child").animate({marginLeft:""},120);
		    }else if(distanceX<0){
		    	//向左滑动
		       //$(".nav-list li:first-child").css("margin-left","-105%");
		       $(".nav-list li:first-child").animate({marginLeft:"-105%"},120);
		    }

		});
		
		});

其实就是在touchmove方法里首先调用一下event.preventDefault();问题就完美解决了！！！亲测有用，希望能帮助到各位。