Today, I developed a left and right scrolling navigation on the mobile side, using the touchmove attribute. There is no problem with the local test, the browser on the mobile terminal is no problem, and there is no problem in the WeChat development tool, but after opening it in the WeChat public account, the sliding effect does not work. I found a solution from the Internet, it turned out to be to call event.preventDefault(); first in the touchmove method. As for the reason, I won't say it, you can go to Baidu. Here is the code for you:
Here is the code before modification:
//Swipe left and right to navigate
$(function(){
$(".nav-list").on('touchstart',function(e){
//Get the position before sliding
startX = e.originalEvent.changedTouches[0].pageX;
});
$(".nav-list").on("touchmove",function(e){
//Get the position after sliding the screen
endX = e.originalEvent.changedTouches[0].pageX;
//Get the sliding distance
distanceX = endX-startX;
// Determine the sliding direction
if(distanceX>0){
// swipe right
// $(".nav-list li:first-child").css("margin-left","0");
$(".nav-list li:first-child").animate({marginLeft:""},120);
}else if(distanceX<0){
// swipe left
//$(".nav-list li:first-child").css("margin-left","-105%");
$(".nav-list li:first-child").animate({marginLeft:"-105%"},120);
}
});
});
Here is the modified code:
//Swipe left and right to navigate
$(function(){
$(".nav-list").on('touchstart',function(e){
//Get the position before sliding
startX = e.originalEvent.changedTouches[0].pageX;
});
$(".nav-list").on("touchmove",function(e){
//Solve that the WeChat terminal does not support touchmove
e.preventDefault();
//************Get the position after sliding the screen***********
endX = e.originalEvent.changedTouches[0].pageX;
//Get the sliding distance
distanceX = endX-startX;
// Determine the sliding direction
if(distanceX>0){
// swipe right
// $(".nav-list li:first-child").css("margin-left","0");
$(".nav-list li:first-child").animate({marginLeft:""},120);
}else if(distanceX<0){
// swipe left
//$(".nav-list li:first-child").css("margin-left","-105%");
$(".nav-list li:first-child").animate({marginLeft:"-105%"},120);
}
});
});
In fact, it is to call event.preventDefault() first in the touchmove method; the problem is solved perfectly! ! ! It is useful to test, I hope it can help you.