How to realize the function of gesture sliding and triggering return by vue-router

In this article, the editor introduces in detail "vue-router how to achieve gesture sliding trigger return function". The content is detailed, the steps are clear, and the details are handled properly. I hope this "vue-router how to achieve gesture sliding trigger return function" article can help you solve your doubts.

There are only "before" and "after" route transitions in vue-router, and there is no "switching" state, so it is impossible for most app (like Wechat) to let the interface follow the finger during sliding. However, the sliding event can still be monitored, and we can trigger the routing fallback event after sliding.

The sliding return of Weibo basically works like this: first slide, and then trigger the return event, but it is very strange to use, with a serious sense of lag. Quark browsers do better: first, the interface does not move when sliding, but there are small icons on the interface, which allows users to receive feedback; second, the return process is very fast, and there is no extra transition animation.

The app.vue file is as follows:

Var swidth = document.documentElement.clientWidth Export default {name: 'app', data: () > ({/ / transition animation of direction page switching. Use direction: "slide-left", / / touchLeft with transition component to delimit the starting point. The starting point is valid only when the starting point is close to the left side of the screen. TouchLeft: swidth*2/5, / / touchStartPoint records the starting point X coordinates touchStartPoint: 0, / / distance records the distance distance: 0, / / the dom of the back button According to whether this dom exists on the page to determine whether the route is fallback backBtn: null}), watch: {/ / the listening path has changed, and determine the page transition animation $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;} / / Real-time calculation distance this.distance = event.targetTouches [0] .pageX-this.touchStartPoint; / / make feedback on the page according to distance. Here is a demonstration of feedback if (this.distance > 0 & & this.distance) by changing the background of the return button.

< 100) { this.backBtn.style.backgroundPosition = ((this.distance - 100) / 100) * 50 + "px 0"; } else if (this.distance >

{this.backBtn.style.backgroundPosition = "00";} 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) {/ / modify the style before returning to make the transition animation look faster document.getElementById ("app"). ClassList.add ("quickback"); this.$router.back (); setTimeout (function () {document.getElementById ("app"). ClassList.remove ("quickback")} # 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;} .regions-left-enter {transform: translate (100%, 0);} .regions-left-leave-active {transform: translate (- 50%, 0);} .regions-right-enter {transform: translate (- 50%, 0);} .salary-right-leave-active {transform: translate (100%, 0);}}

Next, let's take a look at the vue picture, swiping left and right and zooming gestures.

Introduction of 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,},};}

After reading this, the article "how to achieve gesture sliding trigger return function in vue-router" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, welcome to follow the industry information channel.