Vue移動(dòng)端右滑屏幕返回上一頁(yè)附源碼下載
有些時(shí)候我們玩手機(jī)更喜歡使用手勢(shì)滑動(dòng)帶來(lái)的用戶操作體驗(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)端右滑屏幕返回上一頁(yè)。
安裝依賴
使用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的頁(yè)面寫(xiě)上邏輯跳轉(zhuǎn)路由，注意具體頁(yè)面設(shè)置好頁(yè)面觸控范圍，讓整個(gè)屏幕都可以touch。
.cont{
width: 100%;
height: 500px;
}
參照今日頭條app的圖片欄目，我們還可以設(shè)置點(diǎn)擊打開(kāi)新頁(yè)面，上滑打開(kāi)評(píng)論窗口，下滑關(guān)閉圖片等操作。
Vue touch directive項(xiàng)目地址： https://github.com/BensonDu/vue-directive-touch
總結(jié)
以上所述是小編給大家介紹的Vue移動(dòng)端右滑屏幕返回上一頁(yè)附源碼下載,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
- vue+swiper實(shí)現(xiàn)左右滑動(dòng)的測(cè)試題功能
- vue使用swiper實(shí)現(xiàn)左右滑動(dòng)切換圖片
- vue使用better-scroll實(shí)現(xiàn)滑動(dòng)以及左右聯(lián)動(dòng)
- vue基于better-scroll實(shí)現(xiàn)左右聯(lián)動(dòng)滑動(dòng)頁(yè)面
- vue移動(dòng)端的左右滑動(dòng)事件詳解
- vue移動(dòng)端實(shí)現(xiàn)手機(jī)左右滑動(dòng)入場(chǎng)動(dòng)畫(huà)
- Vue實(shí)現(xiàn)移動(dòng)端左右滑動(dòng)效果的方法
- Vue路由切換時(shí)的左滑和右滑效果示例
- 基于Vue實(shí)現(xiàn)頁(yè)面切換左右滑動(dòng)效果
- vue實(shí)現(xiàn)右側(cè)滑出層動(dòng)畫(huà)
相關(guān)文章
vue項(xiàng)目中運(yùn)用webpack動(dòng)態(tài)配置打包多種環(huán)境域名的方法
本人分享一個(gè)vue項(xiàng)目里，根據(jù)命令行輸入不同的命令，打包出不同環(huán)境域名的方法。需要的朋友跟隨小編一起看看吧2019-06-06
這篇文章主要介紹了vue 源碼解析 --虛擬Dom-render的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
解決vue無(wú)法加載文件D:\Program Files\nodejs\node_global\vue.ps1,
這篇文章主要給大家介紹了關(guān)于解決vue無(wú)法加載文件D:\Program Files\nodejs\node_global\vue.ps1,因?yàn)樵诖讼到y(tǒng)上禁止運(yùn)行腳本的相關(guān)資料,這個(gè)報(bào)錯(cuò)是由于在系統(tǒng)上禁止運(yùn)行腳本導(dǎo)致的,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
這篇文章主要介紹了vue如何在main.js中配置全局的通用公共組件問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
詳解使用Vue Router導(dǎo)航鉤子與Vuex來(lái)實(shí)現(xiàn)后退狀態(tài)保存
本篇文章主要介紹了詳解使用Vue Router導(dǎo)航鉤子與Vuex來(lái)實(shí)現(xiàn)后退狀態(tài)保存，具有一定的參考價(jià)值，有興趣的可以了解一下2017-09-09
下面小編就為大家分享一篇axios post提交formdata的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
這篇文章主要介紹了vue如何使用bable將es6轉(zhuǎn)譯為es5問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
在?Vue.js?中,你可以通過(guò)多種方式將樣式私有化,以確保樣式只作用于特定的組件,避免全局污染,本文整理了一些常用的方法,希望對(duì)大家有所幫助2024-11-11
el-select單選時(shí)選擇后輸入框的is-focus狀態(tài)并沒(méi)有取消問(wèn)題解決
這篇文章主要給大家介紹了關(guān)于el-select單選時(shí)選擇后輸入框的is-focus狀態(tài)并沒(méi)有取消問(wèn)題的解決過(guò)程,文中通過(guò)圖文以及代碼示例將解決的辦法介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
這篇文章主要介紹了Vue指令之v-for的使用說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04