vue-router 手势滑动触发返回功能


Posted in Javascript onSeptember 30, 2018

vue-router的路由变换只存在“变换前”和“变换后”,不存在“切换中”的状态,所以做不到大多数app(微信那样的)在滑动过程中让界面跟随手指移动。但滑动事件还是可以监听的,我们可以在滑动之后再触发路由回退事件。

微博的滑动返回基本上就是这样的原理:先滑动、再触发返回事件,但用起来很是怪异,有严重的滞后感。夸克浏览器做的就比较好:一是滑动时界面虽然不动,但是界面上有小图标提示,能让用户接受到反馈;二是返回过程很快,没有多余的过渡动画。

app.vue文件如下:

<template>
 <div id="app" v-on:touchstart="bodyTouchStart" v-on:touchmove="bodyTouchMove" v-on:touchend="bodyTouchEnd">
 <transition :name="direction">
  <keep-alive include="home">
  <router-view class="appView"></router-view>
  </keep-alive>
 </transition>
 </div>
</template>

<script>
var swidth = document.documentElement.clientWidth;

export default {
 name: 'app',
 data: () => ({
 // direction 页面切换的过渡动画,配合transition组件使用
 direction: "slide-left",
 // touchLeft 划动起点界限,起点在靠近屏幕左侧时才有效
 touchLeft: swidth*2/5,
 // touchStartPoint 记录起始点X坐标
 touchStartPoint: 0,
 // distance 记录划动的距离
 distance: 0,
 // 回退按钮的dom,根据页面上是否存在此dom来判断该路由是否可回退
 backBtn: null
 }),

 watch: {
 // 监听路有变化,决定页面过渡动画
 $route(to, from) {
  if (from.name == "login" || from.path.indexOf("home") > -1) {
  this.direction = "slide-left";
  } else if (to.path.indexOf("home") > -1) {
  this.direction = "slide-right";
  } else {
  const toDepth = to.path.split("/").length;
  const fromDepth = from.path.split("/").length;
  this.direction = toDepth < fromDepth ? "slide-right" : "slide-left";
  }
 }
 },

 methods: {
 bodyTouchStart: function(event) {
  this.backBtn = document.getElementById("navback");
  if (this.backBtn) {
  // 获得起点X坐标,初始化distance为0
  this.touchStartPoint = event.targetTouches[0].pageX;
  this.distance = 0;
  }
 },
 bodyTouchMove: function(event) {
  if (this.backBtn && this.touchStartPoint < this.touchLeft) {
  // 只监听单指划动,多指划动不作响应
  if (event.targetTouches.length > 1) {
   return;
  }
  // 实时计算distance
  this.distance = event.targetTouches[0].pageX - this.touchStartPoint;
  // 根据distance在页面上做出反馈。这里演示通过返回按钮的背景变化作出反馈
  if (this.distance > 0 && this.distance < 100) {
   this.backBtn.style.backgroundPosition = ((this.distance - 100) / 100) * 50 + "px 0";
  } else if (this.distance >= 100) {
   this.backBtn.style.backgroundPosition = "0 0";
  } else {
   this.backBtn.style.backgroundPosition = "-50px 0";
  }
  }
 },
 bodyTouchEnd: function(event) {
  if (this.backBtn && this.touchStartPoint < this.touchLeft) {
  // 划动结束,重置数据
  this.touchStartPoint = 0;
  this.backBtn.style.backgroundPosition = "-50px 0";
  // 当划动距离超过100px时,触发返回事件
  if (this.distance > 100) {
   // 返回前修改样式,让过渡动画看起来更快
   document.getElementById("app").classList.add("quickback");
   this.$router.back();
   setTimeout(function(){
   document.getElementById("app").classList.remove("quickback");
   },250)
  }
  }
 }
 }
}
</script>

<style>
#app {
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 width: 100%;
 overflow-x: hidden;
}
.appView {
 position: absolute;
 width: 100%;
 background: #fff;
 min-height: 100vh;
 transition: transform 0.24s ease-out;
}
#app.quickback .appView{
 transition-duration: 0.1s;
}
.slide-left-enter {
 transform: translate(100%, 0);
}
.slide-left-leave-active {
 transform: translate(-50%, 0);
}
.slide-right-enter {
 transform: translate(-50%, 0);
}
.slide-right-leave-active {
 transform: translate(100%, 0);
}
</style>

下面看下vue图片左右滑动及手势缩放

引入vue-awesome-swiperimport 'swiper/dist/css/swiper.css';

import { swiper, swiperSlide } from 'vue-awesome-swiper';components: {
 swiper,
 swiperSlide,
},data() {
 return {
 swiperOption: {
  width: window.innerWidth,
  zoom : true,
  initialSlide: 0,
 },
 };
},<swiper :options="swiperOption" ref="imgOverview" style="height: 100%;">
 <swiper-slide v-for="(img, index) in previewImg">
 <div class="swiper-zoom-container">
  <img :src="img" alt="">
 </div>
 </swiper-slide>
</swiper>

代码案例见 https://github.com/yource/VueSPA

总结

以上所述是小编给大家介绍的vue-router 手势滑动触发返回功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
popdiv
Jul 14 Javascript
JS注释所产生的bug 即使注释也会执行
Nov 19 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
Nov 29 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
Aug 08 Javascript
基于Javascript实现返回顶部按钮
Feb 29 Javascript
JS获取元素多层嵌套思路详解
May 16 Javascript
js中常用的Tab切换效果(推荐)
Aug 30 Javascript
Javascript同时声明一连串(多个)变量的方法
Jan 23 Javascript
jquery dataTable 获取某行数据
May 05 jQuery
浅谈在fetch方法中添加header后遇到的预检请求问题
Aug 31 Javascript
详解Angular结合zTree异步加载节点数据
Jan 20 Javascript
JavaScript模板引擎应用场景及实现原理详解
Dec 14 Javascript
Vue CLI3 开启gzip压缩文件的方式
Sep 30 #Javascript
JS数组实现分类统计实例代码
Sep 30 #Javascript
浅谈微信页面入口文件被缓存解决方案
Sep 29 #Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
Sep 29 #Javascript
vue使用v-for实现hover点击效果
Sep 29 #Javascript
vue 利用路由守卫判断是否登录的方法
Sep 29 #Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
Sep 29 #Javascript
You might like
FCKeditor的安装(PHP)
2007/01/13 PHP
获取PHP警告错误信息的解决方法
2013/06/03 PHP
Sublime里直接运行PHP配置方法
2014/11/28 PHP
PHP扩展开发入门教程
2015/02/26 PHP
php 实现301重定向跳转实例代码
2016/07/18 PHP
PHP实现的各类hash算法长度及性能测试实例
2017/08/27 PHP
php设计模式之中介者模式分析【星际争霸游戏案例】
2020/03/23 PHP
JavaScript的Cookies
2008/01/16 Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
2011/03/10 Javascript
JQuery UI的拖拽功能实现方法小结
2012/03/14 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
2015/04/06 Javascript
JavaScript简单表格编辑功能实现方法
2015/04/16 Javascript
javascript实现手机震动API代码
2015/08/05 Javascript
Bootstrap轮播插件简单使用方法介绍
2016/06/21 Javascript
JavaScript中windows.open()、windows.close()方法详解
2016/07/28 Javascript
图片懒加载imgLazyLoading.js使用详解
2020/09/15 Javascript
详解vue服务端渲染浏览器端缓存(keep-alive)
2018/10/12 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
2020/05/10 Javascript
js实现列表按字母排序
2020/08/11 Javascript
从零学python系列之从文件读取和保存数据
2014/05/23 Python
Python标准库之sqlite3使用实例
2014/11/25 Python
浅谈Python的Django框架中的缓存控制
2015/07/24 Python
Python连接MySQL并使用fetchall()方法过滤特殊字符
2016/03/13 Python
Python的时间模块datetime详解
2017/04/17 Python
基于Python实现的微信好友数据分析
2018/02/26 Python
基于python log取对数详解
2018/06/08 Python
python对象销毁实例(垃圾回收)
2020/01/16 Python
python GUI库图形界面开发之PyQt5中QMainWindow, QWidget以及QDialog的区别和选择
2020/02/26 Python
Jupyter notebook如何修改平台字体
2020/05/13 Python
详解PyQt5中textBrowser显示print语句输出的简单方法
2020/08/07 Python
中国电子产品外贸网站:MiniIntheBox
2017/02/06 全球购物
大学毕业生自我鉴定
2013/11/05 职场文书
企业内部培训方案
2014/02/04 职场文书
经济担保书范文
2014/04/02 职场文书
2016年乡镇综治宣传月活动总结
2016/03/16 职场文书
Python实现日志实时监测的示例详解
2022/04/06 Python