vue-router如何實(shí)現(xiàn)手勢(shì)滑動(dòng)觸發(fā)返回功能-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(guān)vue-router如何實(shí)現(xiàn)手勢(shì)滑動(dòng)觸發(fā)返回功能的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比平山網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式平山網(wǎng)站制作公司更省心,省錢(qián),快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋平山地區(qū)。費(fèi)用合理售后完善，十余年實(shí)體公司更值得信賴。

vue-router的路由變換只存在“變換前”和“變換后”，不存在“切換中”的狀態(tài)，所以做不到大多數(shù)app（微信那樣的）在滑動(dòng)過(guò)程中讓界面跟隨手指移動(dòng)。但滑動(dòng)事件還是可以監(jiān)聽(tīng)的，我們可以在滑動(dòng)之后再觸發(fā)路由回退事件。

　　微博的滑動(dòng)返回基本上就是這樣的原理：先滑動(dòng)、再觸發(fā)返回事件，但用起來(lái)很是怪異，有嚴(yán)重的滯后感?？淇藶g覽器做的就比較好：一是滑動(dòng)時(shí)界面雖然不動(dòng)，但是界面上有小圖標(biāo)提示，能讓用戶接受到反饋；二是返回過(guò)程很快，沒(méi)有多余的過(guò)渡動(dòng)畫(huà)。

　　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 頁(yè)面切換的過(guò)渡動(dòng)畫(huà)，配合transition組件使用
 direction: "slide-left",
 // touchLeft 劃動(dòng)起點(diǎn)界限，起點(diǎn)在靠近屏幕左側(cè)時(shí)才有效
 touchLeft: swidth*2/5,
 // touchStartPoint 記錄起始點(diǎn)X坐標(biāo)
 touchStartPoint: 0,
 // distance 記錄劃動(dòng)的距離
 distance: 0,
 // 回退按鈕的dom，根據(jù)頁(yè)面上是否存在此dom來(lái)判斷該路由是否可回退
 backBtn: null
 }),

 watch: {
 // 監(jiān)聽(tīng)路有變化，決定頁(yè)面過(guò)渡動(dòng)畫(huà)
 $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) {
  // 獲得起點(diǎn)X坐標(biāo)，初始化distance為0
  this.touchStartPoint = event.targetTouches[0].pageX;
  this.distance = 0;
  }
 },
 bodyTouchMove: function(event) {
  if (this.backBtn && this.touchStartPoint < this.touchLeft) {
  // 只監(jiān)聽(tīng)單指劃動(dòng)，多指劃動(dòng)不作響應(yīng)
  if (event.targetTouches.length > 1) {
   return;
  }
  // 實(shí)時(shí)計(jì)算distance
  this.distance = event.targetTouches[0].pageX - this.touchStartPoint;
  // 根據(jù)distance在頁(yè)面上做出反饋。這里演示通過(guò)返回按鈕的背景變化作出反饋
  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) {
  // 劃動(dòng)結(jié)束，重置數(shù)據(jù)
  this.touchStartPoint = 0;
  this.backBtn.style.backgroundPosition = "-50px 0";
  // 當(dāng)劃動(dòng)距離超過(guò)100px時(shí)，觸發(fā)返回事件
  if (this.distance > 100) {
   // 返回前修改樣式，讓過(guò)渡動(dòng)畫(huà)看起來(lái)更快
   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圖片左右滑動(dòng)及手勢(shì)縮放

引入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>

感謝各位的閱讀！關(guān)于“vue-router如何實(shí)現(xiàn)手勢(shì)滑動(dòng)觸發(fā)返回功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)頁(yè)題目：vue-router如何實(shí)現(xiàn)手勢(shì)滑動(dòng)觸發(fā)返回功能-創(chuàng)新互聯(lián)
鏈接地址：http://muchs.cn/article24/coehce.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、網(wǎng)站維護(hù)、移動(dòng)網(wǎng)站建設(shè)、企業(yè)建站、網(wǎng)站改版、外貿(mào)建站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容