Vue移動端右滑屏幕返回上一頁附源碼下載
更新時間：2019年06月26日 08:23:58 作者：月光光
這篇文章主要介紹了Vue移動端右滑屏幕返回上一頁，本文結(jié)合實例給大家介紹的非常詳細(xì)，并附有源碼下載,需要的朋友可以參考下
有些時候我們玩手機(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提供了以下事件類型：
- 單擊： v-touch:tap
- 長按： v-touch:long
- 左滑： v-touch:left
- 右滑： v-touch:right
- 上滑： v-touch:up
- 下滑： v-touch:down
然后在script部分加上滑動事件方法。
methods: {
onSwipeRight () {
this.$router.go(-1)
}
}
接著我們在具體的頁面寫上邏輯跳轉(zhuǎn)路由，注意具體頁面設(shè)置好頁面觸控范圍，讓整個屏幕都可以touch。
.cont{
width: 100%;
height: 500px;
}
參照今日頭條app的圖片欄目，我們還可以設(shè)置點擊打開新頁面，上滑打開評論窗口，下滑關(guān)閉圖片等操作。
Vue touch directive項目地址： https://github.com/BensonDu/vue-directive-touch
總結(jié)
以上所述是小編給大家介紹的Vue移動端右滑屏幕返回上一頁附源碼下載,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
Vue實現(xiàn)監(jiān)聽dom節(jié)點寬高變化方式
這篇文章主要介紹了Vue實現(xiàn)監(jiān)聽dom節(jié)點寬高變化方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要給大家介紹了在vue中如何通過iframe方式加載本地的vue頁面的解決方法，文中有詳細(xì)的解決流程,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了在vue路由上添加公共的路由前綴方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了vue3-HTTP請求方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
本文主要介紹了el-form中的rules未生效的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
這篇文章主要介紹了vue 地圖可視化 maptalks 篇，本文分步驟通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-05-05
Vue3+Ant?design?實現(xiàn)Select下拉框一鍵全選/清空功能
在做后臺管理系統(tǒng)項目的時候,產(chǎn)品增加了一個在Select選擇器中添加一鍵全選和清空的功能,他又不讓在外部增加按鈕,其實如果說在外部增加按鈕實現(xiàn)全選或者清空的話,功能比較簡單的,下面給大家分享Vue3+Ant?design?實現(xiàn)Select下拉框一鍵全選/清空功能,需要的朋友可以參考下2024-05-05
在Element Plus里，Icon圖標(biāo)的用法和以前不一樣了，本文主要介紹了Element Plus的el-icon怎么用，具有一定的參考價值，感興趣的可以了解一下2022-04-04
這篇文章主要為大家介紹了Vue transx組件切換動畫庫示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了vue組件實現(xiàn)首次加載就觸發(fā)watch方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07