今天开发一个移动端的左右滚动导航，用到了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();问题就完美解决了！！！亲测有用，希望能帮助到各位。