移动端左右滑动

      // 滑动

            var touch = new Touch(document.getElementsByTagName("body"),80).init();

            //向左滑动触发事件
   
        var powerOrIncome =this.state.detailsType;
        let that =this;
            touch.swipeLeft = function (dom) {
                // alert(dom.innerText);
           //在这添加你的响应事件
            };

            //向右滑动事件
            touch.swipeRight = function (dom) {
                // alert(dom.innerText);
              //在这添加你的响应事件
            };


        function Touch(dom,range) {
            this.init = function () {
                var that = this;
                for(var i = 0; i<dom.length; i++){
                    (function (dom) {
                        function touchstart(event) {
                            var e = event || window.event;
                            if(e.targetTouches.length === 1){
                                var startX = e.targetTouches[0].clientX,
                                    startY = e.targetTouches[0].clientY;
                                function touchmove(e) {
                                    var moveEndX = e.targetTouches[0].clientX,
                                        moveEndY = e.targetTouches[0].clientY;
                                    if((that.getAngle(startX,startY,moveEndX,moveEndY) >= 135 || that.getAngle(startX,startY,moveEndX,moveEndY) <= -135) && that.getRange(startX,startY,moveEndX,moveEndY) >= range){
                                        that.swipeLeft(dom);
                                        dom.removeEventListener("touchmove",touchmove);
                                    }else if((that.getAngle(startX,startY,moveEndX,moveEndY) >= -45 && that.getAngle(startX,startY,moveEndX,moveEndY) <= 45)&& that.getRange(startX,startY,moveEndX,moveEndY) >= range){
                                        that.swipeRight(dom);
                                        dom.removeEventListener("touchmove",touchmove);
                                    }
                                }

                                function touchend() {
                                    dom.removeEventListener("touchend",touchend);
                                    dom.removeEventListener("touchmove",touchmove);
                                }

                                dom.addEventListener("touchmove",touchmove);
                                dom.addEventListener("touchend",touchend);
                            }
                        }

                        dom.addEventListener("touchstart",touchstart);
                    })(dom[i]);
                }

                return this;
            };

            //计算滑动的角度
            this.getAngle = function (px1, py1, px2, py2) {
                //两点的x、y值
                var x = px2-px1;
                var y = py2-py1;
               var  hypotenuse = Math.sqrt(Math.pow(x, 2)+Math.pow(y, 2));
                //斜边长度
               var  cos = x/hypotenuse;
                var radian = Math.acos(cos);
                //求出弧度
               var  angle = 180/(Math.PI/radian);
                //用弧度算出角度
                if (y<0) {
                   var  angle = -angle;
                } else if ((y == 0) && (x<0)) {
                    angle = 180;
                }
                return angle;
            };

            //计算两点之间的距离
            this.getRange = function (px1,py1,px2,py2) {
                return Math.sqrt(Math.pow(Math.abs(px1 - px2), 2) + Math.pow(Math.abs(py1 - py2), 2));
            };

            this.swipeLeft = function (dom) {};

            this.swipeRight = function (dom) {}
        }
// 滑动
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值