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)文章
JavaScript的MVVM庫(kù)Vue.js入門學(xué)習(xí)筆記
這篇文章主要介紹了JavaScript的MVVM庫(kù)Vue.js入門學(xué)習(xí)筆記,Vue.js是一個(gè)新興的js庫(kù),主要用于實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件,需要的朋友可以參考下2016-05-05
在nginx上部署vue項(xiàng)目(history模式)的方法
vue-router 默認(rèn)是hash模式，使用url的hash來模擬一個(gè)完整的url，當(dāng)url改變的時(shí)候，頁(yè)面不會(huì)重新加載。這篇文章主要介紹了在nginx上部署vue項(xiàng)目(history模式),需要的朋友可以參考下2017-12-12
這篇文章主要介紹了vue的nextTick的使用,本文從源碼出發(fā)給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-11-11
Vue源碼解讀之Component組件注冊(cè)的實(shí)現(xiàn)
這篇文章主要介紹了Vue源碼解讀之Component組件注冊(cè)的實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
Vue如何處理Axios多次請(qǐng)求數(shù)據(jù)顯示問題
這篇文章主要介紹了Vue如何處理Axios多次請(qǐng)求數(shù)據(jù)顯示問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vue項(xiàng)目打包后放服務(wù)器非根目錄下圖片找不到問題
這篇文章主要介紹了vue項(xiàng)目打包后放服務(wù)器非根目錄下圖片找不到問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
茶余飯后聊聊Vue3.0響應(yīng)式數(shù)據(jù)那些事兒
這篇文章主要介紹了茶余飯后聊聊Vue3.0響應(yīng)式數(shù)據(jù)那些事兒，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
vue使用mint-ui實(shí)現(xiàn)下拉刷新和無(wú)限滾動(dòng)的示例代碼
本篇文章主要介紹了vue使用mint-ui實(shí)現(xiàn)下拉刷新和無(wú)限滾動(dòng)的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
使用Vue.js和Element-UI做一個(gè)簡(jiǎn)單登錄頁(yè)面的實(shí)例
下面小編就為大家分享一篇使用Vue.js和Element-UI做一個(gè)簡(jiǎn)單登錄頁(yè)面的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
利用WebStorm創(chuàng)建一個(gè)Vue項(xiàng)目的完整步驟
WebStorm是一個(gè)非常適合學(xué)習(xí)和開發(fā)Vue項(xiàng)目的集成開發(fā)環(huán)境,下面這篇文章主要給大家介紹了關(guān)于利用WebStorm創(chuàng)建一個(gè)Vue項(xiàng)目的完整步驟,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2024-06-06