Vue移动端触滑事件

import Vue from 'vue'
/* 声明构造函数 */
function vueTouch(el, binding, type) {//触屏函数
    var _ = this;
    _.obj = el;
    _.binding = binding;
    _.touchType = type;
    _.vueTouches = { x: 0, y: 0 };//触屏坐标
    _.vueMoves = true;
    _.vueLeave = true;
    _.vueCallBack = typeof (binding.value) == "object" ? binding.value.fn : binding.value;
    _.obj.addEventListener("touchstart", function (e) {
        _.start(e);
    }, false);
    _.obj.addEventListener("touchend", function (e) {
        _.end(e);
    }, false);
    _.obj.addEventListener("touchmove", function (e) {
        _.move(e);
    }, false);
};
vueTouch.prototype = {
    start: function (e) {//监听touchstart事件
        this.vueMoves = true;
        this.vueLeave = true;
        this.longTouch = true;
        this.vueTouches = { x: e.changedTouches[0].pageX, y: e.changedTouches[0].pageY };
        this.time = setTimeout(function () {
            if (this.vueLeave && this.vueMoves) {
                this.touchType == "longtap" && this.vueCallBack(this.binding.value, e);
                this.longTouch = false;
            };
        }.bind(this), 1000);
    },
    end: function (e) {//监听touchend事件
        var disX = e.changedTouches[0].pageX - this.vueTouches.x;//计算移动的位移差
        var disY = e.changedTouches[0].pageY - this.vueTouches.y;
        clearTimeout(this.time);
        if (Math.abs(disX) > 10 || Math.abs(disY) > 100) {//当横向位移大于10,纵向位移大于100,则判定为滑动事件
            this.touchType == "swipe" && this.vueCallBack(this.binding.value, e);//若为滑动事件则返回
            if (Math.abs(disX) > Math.abs(disY)) {//判断是横向滑动还是纵向滑动
                if (disX > 10) {
                    this.touchType == "swiperight" && this.vueCallBack(this.binding.value, e);//右滑
                };
                if (disX < -10) {
                    this.touchType == "swipeleft" && this.vueCallBack(this.binding.value, e);//左滑
                };
            } else {
                if (disY > 10) {
                    this.touchType == "swipedown" && this.vueCallBack(this.binding.value, e);//下滑
                };
                if (disY < -10) {
                    this.touchType == "swipeup" && this.vueCallBack(this.binding.value, e);//上滑
                };
            };
        } else {
            if (this.longTouch && this.vueMoves) {
                this.touchType == "tap" && this.vueCallBack(this.binding.value, e);
                this.vueLeave = false
            };
        };
    },
    move: function (e) {//监听touchmove事件
        this.vueMoves = false;
    }
};
Vue.directive("tap", {//点击事件
    bind: function (el, binding) {
        new vueTouch(el, binding, "tap");
    }
});
Vue.directive("swipe", {//滑动事件
    bind: function (el, binding) {
        new vueTouch(el, binding, "swipe");
    }
});
Vue.directive("swipeleft", {//左滑事件
    bind: function (el, binding) {
        new vueTouch(el, binding, "swipeleft");
    }
});
Vue.directive("swiperight", {//右滑事件
    bind: function (el, binding) {
        new vueTouch(el, binding, "swiperight");
    }
});
Vue.directive("swipedown", {//下滑事件
    bind: function (el, binding) {
        new vueTouch(el, binding, "swipedown");
    }
});
Vue.directive("swipeup", {//上滑事件
    bind: function (el, binding) {
        new vueTouch(el, binding, "swipeup");
    }
});
Vue.directive("longtap", {//长按事件
    bind: function (el, binding) {
        new vueTouch(el, binding, "longtap");
    }
});
export default vueTouch;

将上述代码保存为direct.js文件并放入公共文件中,在组件中调用时,给元素身上绑定指令

<div

class="bot_cont"

v-tap="vuetouch"

v-swipeleft="{fn:vuetouch,name:'左滑'}"

v-swiperight="{fn:vuetouch,name:'右滑'}"

ref="remove"

:class="slideOpen?'slideleft':''"

>

vuetouch是函数名返回两个参数,这是我做的滑动时图标切换处理

// 滑动事件
    vuetouch(s, e) {
      let status = s.name,
        _ = this;
      let remove = _.$refs.remove;
      if (status == "左滑") {
        _.slide = "images/a5.png";
        _.slideOpen = true;
      } else if (status == "右滑") {
        _.slide = "images/a4.png";
        _.slideOpen = false;
      }
    },

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

杀猪刀-墨林

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值