vue2.0移動(dòng)端滑動(dòng)事件vue-touch的實(shí)例代碼
更新時(shí)間：2018年11月27日 08:49:05 作者：你蠢哭我咯
這篇文章主要介紹了vue2.0移動(dòng)端滑動(dòng)事件vue-touch的實(shí)例代碼,需要的朋友可以參考下
Vue-touch的使用
有時(shí)候我們不止需要有返回鍵，也要有手勢(shì)滑動(dòng)切換頁(yè)面的功能時(shí)，這個(gè)時(shí)候vue-touch就派上用場(chǎng)了
API地址：
https://github.com/vuejs/vue-touch/tree/next
安裝
npm insall vue-touch@next --save
//main.js中引入：
import VueTouch from 'vue-touch'
Vue.use(VueTouch, {name: 'v-touch'})
用法如下：
//html代碼
<template>
<v-touch v-on:swipeleft="swiperleft" v-on:swiperight="swiperright" class="wrapper">
<div class="menu-container" ref="menuContainer">
<!-- 這個(gè)是內(nèi)容 -->
</div>
</v-touch>
</template>
export default {
name: 'Queue',
data () {
return {
}
},
methods: {
swiperleft: function () {
this.$router.push({'path':'/queuehistory'});
},
swiperright: function () {
this.$router.push({'path':'/home'});
}
}
}
下面給大家介紹下vue2.0移動(dòng)端滑動(dòng)事件vue-touch，具體內(nèi)容如下所述：
https://github.com/vuejs/vue-touch/tree/next
cnpm install vue-touch@next
var VueTouch = require('vue-touch')
Vue.use(VueTouch, {name: 'v-touch'})
//左劃 默認(rèn)渲染為div data為參數(shù)
<v-touch v-on:swipeleft="onSwipeLeft(data)">Swipe me!</v-touch>
//點(diǎn)擊 渲染為一個(gè)a標(biāo)簽
<v-touch tag="a" v-on:tap="onTap">Tap me!</v-touch>
//點(diǎn)擊 渲染為p標(biāo)簽
<v-touch tag="p" v-on:tap="onTap">Tap me!</v-touch>
總結(jié)
以上所述是小編給大家介紹的vue2.0移動(dòng)端滑動(dòng)事件vue-touch的實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
相關(guān)文章
vue中filter的應(yīng)用場(chǎng)景詳解
這篇文章主要為大家介紹了vue中filter的應(yīng)用場(chǎng)景，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
這篇文章主要給大家介紹了關(guān)于Vue中this.$emit()方法的相關(guān)資料,this.$emit()是 Vue.js 中一個(gè)很有用的方法,可以幫助子組件向父組件傳遞事件,需要的朋友可以參考下2023-09-09
Vue 動(dòng)態(tài)組件與 v-once 指令的實(shí)現(xiàn)
這篇文章主要介紹了Vue 動(dòng)態(tài)組件與 v-once 指令的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
關(guān)于vue-admin-element中的動(dòng)態(tài)加載路由
這篇文章主要介紹了關(guān)于vue-admin-element的動(dòng)態(tài)加載路由，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了一個(gè)基于vue.js無縫滾動(dòng)效果,文中給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-01-01
這篇文章主要介紹了vue如何實(shí)現(xiàn)自定義步驟條問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
這篇文章主要給大家介紹了關(guān)于vue中slot（插槽）的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
這篇文章主要介紹了vuejs對(duì)接后端踩過的坑記錄,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
Nuxt升級(jí)2.0.0時(shí)出現(xiàn)的問題(小結(jié))
這篇文章主要介紹了Nuxt升級(jí)2.0.0時(shí)出現(xiàn)的問題(小結(jié))，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10
axios 是一個(gè)基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端。這篇文章主要介紹了vue axios 簡(jiǎn)單封裝以及思考 ,需要的朋友可以參考下2018-10-10