移动端左右滚动导航，以及解决微信端不支持滚动导航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){//解决微信端不支持touchmovee.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();问题就完美解决了！！！亲测有用，希望能帮助到各位。

移动端左右滚动导航，以及解决微信端不支持滚动导航touchmove的问题相关推荐

解决微信端网页IOS手机的date乱码NaN问题
1.解决微信端网页IOS手机的date乱码NaN问题. IOS:Safari不兼容Javascript中的Date问题(date乱码NaN)把new Date(Date.parse(date.repl ...
h5 android底部导航栏,安卓微信端h5 页面增加底部导航栏总结
Aphorism grow in errors overview 最近在写一个移动端的 jsp 项目, 应项目需求须在安卓机器上实现一个 ios 微信h5页面底部的导航条想到的实现方案: 通过 ...
java微信公众号短信验证码_解决微信端公众号网页获取短信验证码ajax重复调用两次的问题...
问题背景介绍: 微信公众号网页开发的时候,点击发送短信验证码,如果响应时间超长,目前测试是10秒左右(这个10秒左右,是我自己多次测试总结出来的规律) 超过10秒左右,就会自动请求第二遍,这个问题挺恶 ...
如何解决微信端不能直接跳转浏览器
现阶段,微信推广是传播信息速度最快的方法,见的最多的就是在海报上贴上微信二维码,让看到的人都能立刻了解到自己的产品,但是由于微信官方要维持一个绿色的环境, 因此对扫码推广有着非常苛刻的审查, 虽然没有 ...
如何解决微信端直接跳WAP端
现在几乎所有人都使用微信APP,而且对于要做推广的人,所有的产品几乎都离不开微信的推广,然而腾讯会维护微信生态圈,都不会自动跳转到你推广的链接上,通常都会出现下面的提示,那要怎样实现在微信内置浏览器里 ...
移动端300ms延迟_如何解决移动端300ms延迟的问题
声明一下:300ms只是行业内部的统称,其实应该在300ms-350ms之间的一个数值. 移动端300ms延迟的前世今生背景: 2007 年初.苹果公司在发布首款iPhone前夕,遇到一个问题:当时 ...
微信端活体检测|人脸识别SDK|人证比对|身份核验
人脸识别,微信端活体检测技术人脸识别,微信端活体检测技术产品背景随着深度学习方法的应用,人脸识别技术的识别率已经得到质的提升,目前人脸识别率已经达到99%以上.人脸识别技术与其他生物特征识别技术相 ...
python企业微信回调_python 微信企业号-回调模式接收微信端客户端发送消息并被动返回消息...
说明:此代码用于接收手机微信端发送的消息 #-*- coding:utf-8 -*- from flask import Flask,request from WXBizMsgCrypt import ...
微信端H5的相关问题总结
微信端H5的相关问题总结微信端H5的相关问题总结微信端路由(带[#])跳转问题微信二次分享问题微信二次分享配置详情工具类总结微信端路由(带[#])跳转问题问题描述:在微信端页面路由跳转成 ...

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

移动端左右滚动导航，以及解决微信端不支持滚动导航touchmove的问题相关推荐

最新文章

热门文章