您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)vue-router如何實(shí)現(xiàn)手勢滑動(dòng)觸發(fā)返回功能的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過來看看吧。
vue-router的路由變換只存在“變換前”和“變換后”,不存在“切換中”的狀態(tài),所以做不到大多數(shù)app(微信那樣的)在滑動(dòng)過程中讓界面跟隨手指移動(dòng)。但滑動(dòng)事件還是可以監(jiān)聽的,我們可以在滑動(dòng)之后再觸發(fā)路由回退事件。
微博的滑動(dòng)返回基本上就是這樣的原理:先滑動(dòng)、再觸發(fā)返回事件,但用起來很是怪異,有嚴(yán)重的滯后感??淇藶g覽器做的就比較好:一是滑動(dòng)時(shí)界面雖然不動(dòng),但是界面上有小圖標(biāo)提示,能讓用戶接受到反饋;二是返回過程很快,沒有多余的過渡動(dòng)畫。
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 頁面切換的過渡動(dòng)畫,配合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ù)頁面上是否存在此dom來判斷該路由是否可回退 backBtn: null }), watch: { // 監(jiān)聽路有變化,決定頁面過渡動(dòng)畫 $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)聽單指劃動(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在頁面上做出反饋。這里演示通過返回按鈕的背景變化作出反饋 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)距離超過100px時(shí),觸發(fā)返回事件 if (this.distance > 100) { // 返回前修改樣式,讓過渡動(dòng)畫看起來更快 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)及手勢縮放
引入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)手勢滑動(dòng)觸發(fā)返回功能”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。