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 相关文章推荐
JavaScript 图片预览效果 推荐
Dec 22 Javascript
基于KMP算法JavaScript的实现方法分析
May 03 Javascript
jquery选择器原理介绍($()使用方法)
Mar 25 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
Dec 02 Javascript
AngularJS  双向数据绑定详解简单实例
Oct 20 Javascript
用js将long型数据转换成date型或datetime型的实例
Jul 03 Javascript
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
微信小程序收货地址API兼容低版本解决方法
May 18 Javascript
vue-cli脚手架打包静态资源请求出错的原因与解决
Jun 06 Javascript
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
JS window对象简单操作完整示例
Jan 14 Javascript
Vue如何清空对象
Mar 03 Vue.js
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
利用 window_onload 实现select默认选择
2006/10/09 PHP
Discuz! Passport 通行证整合
2008/03/27 PHP
php5中date()得出的时间为什么不是当前时间的解决方法
2008/06/30 PHP
调试PHP程序的多种方法介绍
2014/11/06 PHP
js类中获取外部函数名的方法与代码
2007/09/12 Javascript
javascript事件问题
2009/09/05 Javascript
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
2010/05/15 Javascript
js判断上传文件的类型和大小示例代码
2013/10/18 Javascript
javascript密码强度校验代码(两种方法)
2015/08/10 Javascript
纯css实现窗户玻璃雨滴逼真效果
2015/08/23 Javascript
js文本框走动跑马灯效果代码分享
2015/08/25 Javascript
在Ubuntu系统上安装Node.JS的教程
2015/10/15 Javascript
基于zepto.js简单实现上传图片
2016/06/21 Javascript
原生js实现放大镜
2017/02/20 Javascript
微信小程序支付之c#后台实现方法
2017/10/19 Javascript
JavaScript中set与get方法用法示例
2018/08/15 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
2019/05/09 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
2019/06/03 Javascript
一次让你了解全部JavaScript的作用域
2019/06/24 Javascript
深入学习Vue nextTick的用法及原理
2019/10/08 Javascript
CountUp.js实现数字滚动增值效果
2019/10/17 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
2019/11/07 Javascript
python模拟鼠标拖动操作的方法
2015/03/11 Python
python关键字and和or用法实例
2015/05/28 Python
利用Pandas和Numpy按时间戳将数据以Groupby方式分组
2019/07/22 Python
Python logging模块原理解析及应用
2020/08/13 Python
如何利用pycharm进行代码更新比较
2020/11/04 Python
python selenium 获取接口数据的实现
2020/12/07 Python
Footshop法国:购买运动鞋
2020/01/19 全球购物
半年思想汇报
2013/12/30 职场文书
开展党的群众路线教育实践活动方案
2014/02/05 职场文书
文员的职业生涯规划发展方向
2014/02/08 职场文书
2014年大学团支部工作总结
2014/12/02 职场文书
2015年信息化建设工作总结
2015/07/23 职场文书
观看《筑梦中国》纪录片心得体会
2016/01/18 职场文书
golang 在windows中设置环境变量的操作
2021/04/29 Golang