【自用笔记】关于移动端左滑返回的操作

在混合开发中，需要左滑返回上一级的操作功能，但是因为种种原因（本身技术菜，什么都不知道，其次是第三方联合开发，我这边只有vue+vant框架，无法调起设备），所以就需要其他的技术来实现这一需求。

首先找到了三方插件：vue-directive-touch

使用方法比较简单：

//1、安装插件:
npm install vue-directive-touch --save


//2、在main.js中引入插件
import touch from 'vue-directive-touch';
Vue.use(touch);

//3、在app.vue或者你的router-view容器中使用（这里展示在app.vue中使用）
<template>
    <div v-touch:left="onSwipeLeft" v-touch:right="onSwipeRight">
        <router-view/>
    </div>
</template>
<script>
   methods: {
        //向左滑动
        onSwipeLeft () {
          this.$router.go(-1)
        },
        //向右滑动
        onSwipeRight() {
            //这里进行自己的业务需求
        }
    },
  },
</script>

在查找过程中，有很多帖子都说需要注意在使用过程中，容器的大小，具体操作可以看这边文章，

Vue App右滑屏幕返回上一页_vue右滑返回上一级-优快云博客

但是在实际使用过程中发现，还是有一定的问题（我解决不了）：我在左右切换的时候都可以正常进行，但是上下刷动页面的时候会自动触发左右切换事件，尝试配置，但没有成功，于是转战重新找了一个方案 —— 自定义，也非常简单，直接复制粘贴，就可以使用啦，最重要的是，它可控可配置，全在自己的掌握之中！

在components文件夹中添加v-touch.js文件和directives.js文件（也可以在你自己统一的文件夹中，这个随自己的业务需求）

//components - v-touch.js：

class  vueTouch {
    constructor(el, binding, type) {
        // 触屏函数
        var _this = this;
        this.obj = el;
        this.binding = binding;
        this.touchType = type;
        this.vueTouches = { x: 0, y: 0 }; // 触屏坐标
        this.vueMoves = true;
        this.vueLeave = true;
        this.vueCallBack = typeof binding.value == 'object' ? binding.value.fn : binding.value;
        this.obj.addEventListener(
            'touchstart',
            function(e) {
                _this.start(e);
            },
            false
        );
        this.obj.addEventListener(
            'touchend',
            function(e) {
                _this.end(e);
            },
            false
        );
        this.obj.addEventListener(
            'touchmove',
            function(e) {
                _this.move(e);
            },
            false
        );
    }
    start(e) {
        // 监听touchstart事件
        this.vueMoves = true;
        this.vueLeave = true;
        this.longTouch = true;
        this.vueTouches = { x: e.changedTouches[0].clientX, y: e.changedTouches[0].clientY };
        console.log('targetTouches', e.targetTouches[0]);
        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(e) {
        // 监听touchend事件
        console.log('this.vueTouches', this.vueTouches);
        console.log('this.changedTouches', e.changedTouches[0].clientX);
        // 此处代码用来解决IOS回弹问题 begain
        if (e.changedTouches[0].clientX<0) {
            return;
        }
        // 此处代码用来解决IOS回弹问题 end
        var disX = e.changedTouches[0].clientX - this.vueTouches.x; // 计算移动的位移差
        var disY = e.changedTouches[0].clientY - this.vueTouches.y;
        console.log(Math.abs(disX), Math.abs(disY));

        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 > 30) {
                    this.touchType == 'swiperight' && this.vueCallBack(this.binding.value, e); // 右滑
                }
                if (disX < -30) {
                    this.touchType == 'swipeleft' && this.vueCallBack(this.binding.value, e); // 左滑
                }
            } else {
                if (disY > 30) {
                    this.touchType == 'swipedown' && this.vueCallBack(this.binding.value, e); // 下滑
                }
                if (disY < -30) {
                    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(e) {
        // 监听touchmove事件
        this.vueMoves = false;
    }
}
export default vueTouch;

// components - directives.js

import vueTouch from './v-touch';

export default (Vue) => {

    Vue.directive('ztap', {
        // 点击事件
        bind(el, binding) {
            new vueTouch(el, binding, 'tap');
        }
    });
    Vue.directive('zswipe', {
        // 滑动事件
        bind(el, binding) {
            new vueTouch(el, binding, 'swipe');
        }
    });
    Vue.directive('zswipeleft', {
        // 左滑事件
        bind(el, binding) {
            new vueTouch(el, binding, 'swipeleft');
        }
    });
    Vue.directive('zswiperight', {
        // 右滑事件
        bind(el, binding) {
            new vueTouch(el, binding, 'swiperight');
        }
    });
    Vue.directive('zswipedown', {
        // 下滑事件
        bind(el, binding) {
            new vueTouch(el, binding, 'swipedown');
        }
    });
    Vue.directive('zswipeup', {
        // 上滑事件
        bind(el, binding) {
            new vueTouch(el, binding, 'swipeup');
        }
    });
    Vue.directive('zlongtap', {
        // 长按事件
        bind(el, binding) {
            new vueTouch(el, binding, 'longtap');
        }
    });

};

然后在main.js中引用，在需要的地方使用即可（使用和第一种方式差不多）

import directives from './components/directives';
Vue.use(directives);


//在需要的地方使用（这里我是在自己的路由展示页面使用的，其实和app.vue使用同理）
<div id='wm_contain' v-zswipeleft="onSwipeLeft" v-zswiperight="onSwipeRight">
            <keep-alive>
                <router-view v-if="$route.meta.keepAlive">
                </router-view>
            </keep-alive>
            <router-view v-if="!$route.meta.keepAlive"></router-view>

 </div>

//在method里面写事件逻辑即可，这里就不重复了

学习摘录网址： 

vue自定义指令实现移动端触摸滑动事件（兼容设置了平滑时IOS返回回弹事件阻止） - 简书