【自用笔记】关于移动端左滑返回的操作 |
您所在的位置：网站首页 › 触发应用侧滑功能是什么意思 › 【自用笔记】关于移动端左滑返回的操作 |
|
在混合开发中，需要左滑返回上一级的操作功能，但是因为种种原因（本身技术菜，什么都不知道，其次是第三方联合开发，我这边只有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中使用） methods: { //向左滑动 onSwipeLeft () { this.$router.go(-1) }, //向右滑动 onSwipeRight() { //这里进行自己的业务需求 } }, },在查找过程中，有很多帖子都说需要注意在使用过程中，容器的大小，具体操作可以看这边文章， Vue App右滑屏幕返回上一页_vue右滑返回上一级-CSDN博客 但是在实际使用过程中发现，还是有一定的问题（我解决不了）：我在左右切换的时候都可以正常进行，但是上下刷动页面的时候会自动触发左右切换事件，尝试配置，但没有成功，于是转战重新找了一个方案 —— 自定义，也非常简单，直接复制粘贴，就可以使用啦，最重要的是，它可控可配置，全在自己的掌握之中！ 在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 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使用同理） //在method里面写事件逻辑即可，这里就不重复了学习摘录网址： vue自定义指令实现移动端触摸滑动事件（兼容设置了平滑时IOS返回回弹事件阻止） - 简书 |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |