快捷導(dǎo)航

Vue移動(dòng)端右滑屏幕返回上一頁附源碼下載

更新時(shí)間：2019年06月26日 08:23:58 作者：月光光

這篇文章主要介紹了Vue移動(dòng)端右滑屏幕返回上一頁，本文結(jié)合實(shí)例給大家介紹的非常詳細(xì)，并附有源碼下載,需要的朋友可以參考下

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

查看演示下載源碼

安裝依賴

使用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的模板中加上滑動(dòng)事件。

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

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

單擊： v-touch:tap
長(zhǎng)按： v-touch:long
左滑： v-touch:left
右滑： v-touch:right
上滑： v-touch:up
下滑： v-touch:down

然后在script部分加上滑動(dòng)事件方法。

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

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

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

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

Vue touch directive項(xiàng)目地址： https://github.com/BensonDu/vue-directive-touch

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

Vue實(shí)現(xiàn)監(jiān)聽dom節(jié)點(diǎn)寬高變化方式
這篇文章主要介紹了Vue實(shí)現(xiàn)監(jiān)聽dom節(jié)點(diǎn)寬高變化方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue中通過iframe方式加載本地的vue頁面的解決方法
這篇文章主要給大家介紹了在vue中如何通過iframe方式加載本地的vue頁面的解決方法，文中有詳細(xì)的解決流程,需要的朋友可以參考下
2023-06-06
在vue路由上添加公共的路由前綴方式
這篇文章主要介紹了在vue路由上添加公共的路由前綴方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-12-12
vue3-HTTP請(qǐng)求方式
這篇文章主要介紹了vue3-HTTP請(qǐng)求方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06
el-form中的rules未生效的解決方法
本文主要介紹了el-form中的rules未生效的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-02-02
vue 地圖可視化 maptalks 篇實(shí)例代碼詳解
這篇文章主要介紹了vue 地圖可視化 maptalks 篇，本文分步驟通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
2019-05-05
Vue3+Ant?design?實(shí)現(xiàn)Select下拉框一鍵全選/清空功能
在做后臺(tái)管理系統(tǒng)項(xiàng)目的時(shí)候,產(chǎn)品增加了一個(gè)在Select選擇器中添加一鍵全選和清空的功能,他又不讓在外部增加按鈕,其實(shí)如果說在外部增加按鈕實(shí)現(xiàn)全選或者清空的話,功能比較簡(jiǎn)單的,下面給大家分享Vue3+Ant?design?實(shí)現(xiàn)Select下拉框一鍵全選/清空功能,需要的朋友可以參考下
2024-05-05
Element Plus的el-icon怎么用
在Element Plus里，Icon圖標(biāo)的用法和以前不一樣了，本文主要介紹了Element Plus的el-icon怎么用，具有一定的參考價(jià)值，感興趣的可以了解一下
2022-04-04
Vue transx組件切換動(dòng)畫庫示例詳解
這篇文章主要為大家介紹了Vue transx組件切換動(dòng)畫庫示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
vue組件實(shí)現(xiàn)首次加載就觸發(fā)watch
這篇文章主要介紹了vue組件實(shí)現(xiàn)首次加載就觸發(fā)watch方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-07-07