欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2019年06月26日 08:23:58   作者：月光光  
這篇文章主要介紹了Vue移動(dòng)端右滑屏幕返回上一頁(yè)，本文結(jié)合實(shí)例給大家介紹的非常詳細(xì)，并附有源碼下載,需要的朋友可以參考下

有些時(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提供了以下事件類(lèi)型：

  • 單擊： 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)注明出處，謝謝！

相關(guān)文章

  • Vue實(shí)現(xiàn)監(jiān)聽(tīng)dom節(jié)點(diǎn)寬高變化方式

    Vue實(shí)現(xiàn)監(jiān)聽(tīng)dom節(jié)點(diǎn)寬高變化方式

    這篇文章主要介紹了Vue實(shí)現(xiàn)監(jiān)聽(tīng)dom節(jié)點(diǎn)寬高變化方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • vue中通過(guò)iframe方式加載本地的vue頁(yè)面的解決方法

    vue中通過(guò)iframe方式加載本地的vue頁(yè)面的解決方法

    這篇文章主要給大家介紹了在vue中如何通過(guò)iframe方式加載本地的vue頁(yè)面的解決方法，文中有詳細(xì)的解決流程,需要的朋友可以參考下
    2023-06-06
  • 在vue路由上添加公共的路由前綴方式

    在vue路由上添加公共的路由前綴方式

    這篇文章主要介紹了在vue路由上添加公共的路由前綴方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2022-12-12
  • vue3-HTTP請(qǐng)求方式

    vue3-HTTP請(qǐng)求方式

    這篇文章主要介紹了vue3-HTTP請(qǐng)求方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2022-06-06
  • el-form中的rules未生效的解決方法

    el-form中的rules未生效的解決方法

    本文主要介紹了el-form中的rules未生效的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2023-02-02
  • vue 地圖可視化 maptalks 篇實(shí)例代碼詳解

    vue 地圖可視化 maptalks 篇實(shí)例代碼詳解

    這篇文章主要介紹了vue 地圖可視化 maptalks 篇，本文分步驟通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
    2019-05-05
  • Vue3+Ant?design?實(shí)現(xiàn)Select下拉框一鍵全選/清空功能

    Vue3+Ant?design?實(shí)現(xiàn)Select下拉框一鍵全選/清空功能

    在做后臺(tái)管理系統(tǒng)項(xiàng)目的時(shí)候,產(chǎn)品增加了一個(gè)在Select選擇器中添加一鍵全選和清空的功能,他又不讓在外部增加按鈕,其實(shí)如果說(shuō)在外部增加按鈕實(shí)現(xiàn)全選或者清空的話,功能比較簡(jiǎn)單的,下面給大家分享Vue3+Ant?design?實(shí)現(xiàn)Select下拉框一鍵全選/清空功能,需要的朋友可以參考下
    2024-05-05
  • Element Plus的el-icon怎么用

    Element Plus的el-icon怎么用

    在Element Plus里，Icon圖標(biāo)的用法和以前不一樣了，本文主要介紹了Element Plus的el-icon怎么用，具有一定的參考價(jià)值，感興趣的可以了解一下
    2022-04-04
  • Vue transx組件切換動(dòng)畫(huà)庫(kù)示例詳解

    Vue transx組件切換動(dòng)畫(huà)庫(kù)示例詳解

    這篇文章主要為大家介紹了Vue transx組件切換動(dòng)畫(huà)庫(kù)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2022-07-07
  • vue組件實(shí)現(xiàn)首次加載就觸發(fā)watch

    vue組件實(shí)現(xiàn)首次加載就觸發(fā)watch

    這篇文章主要介紹了vue組件實(shí)現(xiàn)首次加載就觸發(fā)watch方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2022-07-07

最新評(píng)論