有些時候我們玩手機(jī)更喜歡使用手勢滑動帶來的用戶操作體驗。Vue touch directive是一個用于移動設(shè)備操作指令的輕量級的VUE組件。使用它可以輕松實現(xiàn)屏幕觸控、滑動觸發(fā)事件，提高用戶體驗。本文結(jié)合實例講解如何實現(xiàn)Vue移動端右滑屏幕返回上一頁。

查看演示   下載源碼

安裝依賴

使用npm安裝vue-directive-touch組件。

npm install vue-directive-touch --save

引入組件

在main.js中引入vue-directive-touch。

import touch from 'vue-directive-touch';Vue.use(touch);

使用

在App.vue的模板中加上滑動事件。

<template> <div id="app" v-touch:right="onSwipeRight"> <transition>  <router-view></router-view> </transition> </div></template>

vue-directive-touch提供了以下事件類型：

然后在script部分加上滑動事件方法。

methods: {  onSwipeRight () {  this.$router.go(-1)  } }

接著我們在具體的頁面寫上邏輯跳轉(zhuǎn)路由，注意具體頁面設(shè)置好頁面觸控范圍，讓整個屏幕都可以touch。

.cont{ width: 100%; height: 500px;}

參照今日頭條app的圖片欄目，我們還可以設(shè)置點(diǎn)擊打開新頁面，上滑打開評論窗口，下滑關(guān)閉圖片等操作。

Vue touch directive項目地址： https://github.com/BensonDu/vue-directive-touch

總結(jié)

以上所述是小編給大家介紹的Vue移動端右滑屏幕返回上一頁附源碼下載,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對錯新站長站網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！