vue2.0移動端滑動事件vue-touch的實例代碼
更新時間：2018年11月27日 08:49:05 作者：你蠢哭我咯
這篇文章主要介紹了vue2.0移動端滑動事件vue-touch的實例代碼,需要的朋友可以參考下
Vue-touch的使用
有時候我們不止需要有返回鍵，也要有手勢滑動切換頁面的功能時，這個時候vue-touch就派上用場了
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">
<!-- 這個是內(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移動端滑動事件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'})
//左劃 默認渲染為div data為參數(shù)
<v-touch v-on:swipeleft="onSwipeLeft(data)">Swipe me!</v-touch>
//點擊 渲染為一個a標簽
<v-touch tag="a" v-on:tap="onTap">Tap me!</v-touch>
//點擊 渲染為p標簽
<v-touch tag="p" v-on:tap="onTap">Tap me!</v-touch>
總結(jié)
以上所述是小編給大家介紹的vue2.0移動端滑動事件vue-touch的實例代碼，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
相關(guān)文章
這篇文章主要為大家介紹了vue中filter的應用場景，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
這篇文章主要給大家介紹了關(guān)于Vue中this.$emit()方法的相關(guān)資料,this.$emit()是 Vue.js 中一個很有用的方法,可以幫助子組件向父組件傳遞事件,需要的朋友可以參考下2023-09-09
Vue 動態(tài)組件與 v-once 指令的實現(xiàn)
這篇文章主要介紹了Vue 動態(tài)組件與 v-once 指令的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-02-02
關(guān)于vue-admin-element中的動態(tài)加載路由
這篇文章主要介紹了關(guān)于vue-admin-element的動態(tài)加載路由，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了一個基于vue.js無縫滾動效果,文中給大家介紹的非常詳細，具有參考借鑒價值，需要的朋友可以參考下2018-01-01
這篇文章主要介紹了vue如何實現(xiàn)自定義步驟條問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
這篇文章主要給大家介紹了關(guān)于vue中slot（插槽）的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用vue具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-11-11
這篇文章主要介紹了vuejs對接后端踩過的坑記錄,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
Nuxt升級2.0.0時出現(xiàn)的問題(小結(jié))
這篇文章主要介紹了Nuxt升級2.0.0時出現(xiàn)的問題(小結(jié))，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端。這篇文章主要介紹了vue axios 簡單封裝以及思考 ,需要的朋友可以參考下2018-10-10