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)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);
//     });
// })