HBulider移动端之webview左右滑动禁止切换判断事件

MUI框架之webview左右滑动组件；实现可以上下滑动，禁止左右切换滑动逻辑处理；

• 本博主尝试了多种方法方式，苦苦挣扎了好几个小时，得出的心得体会分享给各位。
• 用到了touchmove事件和touchstart的监听列表滑动事件；

var btn = document.getElementById("cg_list");  //绑定到列表id
                    var xx,yy,XX,YY,swipeX,swipeY;//添加全局变量
                        btn.addEventListener('touchstart',function(event){//滑动开始事件
                         xx = event.targetTouches[0].screenX ;
                         yy = event.targetTouches[0].screenY ;
                         swipeX = true;//给予初始值
                         swipeY = true ;
                        })
                     btn.addEventListener('touchmove',function(event){
                          XX = event.targetTouches[0].screenX ;
                          YY = event.targetTouches[0].screenY ; 

                          if(swipeX && Math.abs(XX-xx)-Math.abs(YY-yy)>0)  //左右滑动
                          {
                              event.stopPropagation();//阻止冒泡
                              event.preventDefault();//阻止浏览器默认事件
                              swipeY = false ;//如果为false就阻止
                              console.log(swipeY)
                              //左右滑动
                          }
                          else if(swipeY && Math.abs(XX-xx)-Math.abs(YY-yy)<0){  //上下滑动
                              swipeX = true ;//为true就不阻止
                              console.log(swipeX)
                              //上下滑动，使用浏览器默认的上下滑动
                          }
                     });

最终，这样就可以实现webview移动端左右禁止切换的效果了，之前使用了mui自带的div左右滑动都不行，因为他这个是内容区域分页显示的。总之各种困扰和报错，大家可以去尝试下，希望是你们想要的结果；别忘了点个赞！谢谢！！