怎么使用vue-router實現手勢滑動觸發返回功能

這篇“怎么使用vue-router實現手勢滑動觸發返回功能”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“怎么使用vue-router實現手勢滑動觸發返回功能”文章吧。

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" >
 <swiper-slide v-for="(img, index) in previewImg">
 <div class="swiper-zoom-container">
  <img :src="img" alt="">
 </div>
 </swiper-slide>
</swiper>

vue是什么

Vue是一套用于構建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區別是，使用Vue可以自底向上逐層應用，其核心庫只關注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態系統支持的庫開發復雜的單頁應用。

以上就是關于“怎么使用vue-router實現手勢滑動觸發返回功能”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。