H5左滑动不能单独滑动问题和上下滚动不了问题的解决办法

如下代码：
$(’.ul-text’)是页面的N个列表，可以不要，直接写上下面的touchstart,touchmove,touchend,来获取屏幕的X，Y。
和获取滑动距离。在这里呢，会有一个默认事件，不阻止的话，你的左滑动和在浏览器开启H5页面的时候，不会单独的执行你滑动的那单独列表，会全部同时滑动，所以你得阻止默认事件，在你需要的左滑动，或者右滑动的判断里面，写上：
// }else if(Math.abs(distanceX)>Math.abs(distanceY) && distanceX<0){//左滑动

//             document.addEventListener('touchmove', function (event) {//阻止默认事件
//                 window.event.returnValue = false;
//             }, false);

// var x=$(this).position().left;
// x = Number(x)-5;
// $(this).css({position:‘relative’,left:x+‘px’})
// console.log(x)

这样才可以单独的左滑动。这里面再写上自己相应的执行代码就可以了。
如果你的需求是需要在touchstart里面，那就在里面写上屏幕的X，Y和滑动距离，和判断左滑还是右滑的里面添加

  //             document.addEventListener('touchmove', function (event) {//阻止默认事件//                 window.event.returnValue = false;//             }, false);

以上这个阻止默认事件，就可以了，再写自己逻辑代码就搞定。最后当然就是要恢复默认事件，不然的话，你的列表是上下滚动不了的。！！！一般都是在touchend（就是手指触碰屏幕离开那一刻）里面添加上这个代码就行了。

document.addEventListener('touchmove', function (event) { //恢复默认事件
//             window.event.returnValue = true;
//         }, false);

以下是整个H5滑动的代码：

// $('.ul-text').each(function(){
// //获取接触屏幕时的X和Y
//     $(this).bind('touchstart',function(e){//         startX = e.originalEvent.changedTouches[0].pageX,
//         startY = e.originalEvent.changedTouches[0].pageY;//     });
//     $(this).bind('touchmove',function(e){
//         //获取滑动屏幕时的X,Y
//         endX = e.originalEvent.changedTouches[0].pageX,
//         endY = e.originalEvent.changedTouches[0].pageY;
//         //获取滑动距离
//         distanceX = endX-startX;
//         distanceY = endY-startY;
//         //判断滑动方向
//         if(Math.abs(distanceX)>Math.abs(distanceY) && distanceX>0){//右滑动//         }else if(Math.abs(distanceX)>Math.abs(distanceY) && distanceX<0){//左滑动//             document.addEventListener('touchmove', function (event) {//阻止默认事件
//                 window.event.returnValue = false;
//             }, false);
//                 var x=$(this).position().left;
//                 x = Number(x)-5;
//                 $(this).css({position:'relative',left:x+'px'})
//                 console.log(x)//         }else if(Math.abs(distanceX)<Math.abs(distanceY) && distanceY<0){//上滑动//         }else if(Math.abs(distanceX)<Math.abs(distanceY) && distanceY>0){//下滑动//         }else{
//             console.log('点击未滑动');
//         }//     });
//     $(this).bind('touchend',function(e){//         startX = e.originalEvent.changedTouches[0].pageX,
//         startY = e.originalEvent.changedTouches[0].pageY;
//         $(this).css({position:'relative',left:'0px'})
//         document.addEventListener('touchmove', function (event) { //恢复默认事件
//             window.event.returnValue = true;
//         }, false);
//     });
// })

H5左滑动不能单独滑动问题和上下滚动不了问题的解决办法相关推荐

苹果手机上滑动会卡顿_iPhone手机卡顿怎么办？iPhone手机卡顿解决办法
iPhone手机最引以为傲的就是流畅性,能在后台和软件之间切换自如.但世界上还没有一个完美的手机系统,所以iPhone手机也是会卡顿的.软件过多,操作过频繁,或者是老版本的iPhone手机用久了都有可 ...
VScode软件按住ctrl加鼠标左键无法跳转到框架已有方法或自定义方法，解决办法---潘万丁
我的是用thinkphp框架编写的代码,当按住ctrl+鼠标左键对应的方法不显示小手且点击后无法跳转,解决方法如下: 安装一个PHP Intelephense插件就行啦:点击左下角的设置图标,然后点击 ...
H5 input输入限制最大位数，和调用小键盘需求发生冲突的解决办法
首先,限制输入最大位数时,input有自带的属性maxlength. <input type="text" name="email" maxlength= ...
微信小程序侧边栏滑动特效(左右滑动)
侧边栏滑动是很常见的功能,但是小程序出来不久,很多特效还没有成熟案例,只能原生重写,所以今天为大家带来4个漂亮的侧边栏特效~~ 侧边栏特效一先看效果: wxml: <!--page/one/i ...
android 手势识别（缩放单指滑动多指滑动）
Android P 手势识别 1.前提介绍: 2.单指相关 2.双指缩放 3.多指滑动. 4.总体识别代码 1.前提介绍: 关于Android 手势识别就是当前view 根据用户的不同touch行为, ...
android自定义滑动,Android自定义滑动刻度尺
一基础: 自定义View实现跟随手指滚动的刻度尺,实现了类似SeekBar的滑动选中效果.项目地址,欢迎star! UI图: 功能: 通过设置最小值跟最大值的范围,以及offset值.View将根据 ...
Android 7.1 增加屏幕边缘滑动事件(手势滑动)两种方式(Back,Home,Menu功能键) 免开启无障碍功能
目前公司在做新项目开发,项目目前是不让有Back,Home,Menu实体按键,这就导致了一个问题,点开其它应用无法返回到桌面, 当然些问题对于做开发的我们肯定是难不到的,如果我们开发碰到这问题肯定是a ...
wordpress滑动验证_WordPress图像滑块：滑动还是不滑动？
wordpress滑动验证 Image sliders (also known as image carousels or slideshows) can be a convenient way to ...
微信小程序界面从右边滑出_微信小程序侧边栏滑动特效(左右滑动)
侧边栏滑动是很常见的功能,但是小程序出来不久,很多特效还没有成熟案例,只能原生重写,所以今天为大家带来4个漂亮的侧边栏特效~~ 侧边栏特效一先看效果: wxml: 第一个item1 第二个item2 ...

H5左滑动不能单独滑动问题和上下滚动不了问题的解决办法

H5左滑动不能单独滑动问题和上下滚动不了问题的解决办法相关推荐

最新文章

热门文章