vue?vue-touch移動端手勢詳解
更新時間：2022年03月28日 10:32:32 作者：神奇大叔
這篇文章主要介紹了vue?vue-touch移動端手勢詳解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
1、安裝
cnpm install vue-touch@next --save
2、引入
在main.js中
import VueTouch from 'vue-touch'
Vue.use(VueTouch, {name: 'v-touch'}) ?v-touch可以是自定義名稱3、使用
Vue.use注冊的name名稱，默認(rèn)該標(biāo)簽為div
v-touch
(1)替換標(biāo)簽
tag="要變成的標(biāo)簽名稱,默認(rèn)為div"
(2)定義手勢
@事件類型='回調(diào)'
(3)配置手勢事件選項
:小寫事件類型名稱-options="{ direction: 'horizontal', threshold: 100 }
threshold臨界值directions方向: 'up', 'down', 'left', 'right', 'horizontal', 'vertical', 'all'- 具體配置查看
hammerjs
(4)阻止/觸發(fā)手勢
:enabled="true/false" ?
允許/禁止所有的手勢
:enabled="{ pinch: true, rotate: false }" ?允許和禁止指定手勢
(5)公共組件方法
1、通過ref獲取到該標(biāo)簽
2、在方法中
this.$refs.tapper.disable('tap')公共方法
disable('手勢名稱')enable('手勢名稱')toggle('手勢名稱')disableAll()disable all RecognizersenableAll()enable all RecognizersisEnabled('手勢名稱')
(6)自定義手勢
在main.js中,在Vue.use之前使用
VueTouchVueTouch.registerCustomEvent('doubletap', {
? type: '手勢名稱',
? ...手勢事件的配置選項,見(3)
? taps: 2 ?對應(yīng)tap手勢的觸發(fā)點(diǎn)擊次數(shù)配置
})
> ...</v-touch>4、事件類型
Pan平移
panpanstartpanmovepanendpancancelpanleftpanrightpanuppandown
Pinch縮放
pinchpinchstartpinchmovepinchendpinchcancelpinchinpinchout
Press按壓
presspressup
Rotate旋轉(zhuǎn)
rotaterotatestartrotatemoverotateendrotatecancel
Swipe滑動
swipeswipeleftswiperightswipeupswipedown
Tap點(diǎn)擊
tap
代碼示例
<template>
? ?<div>
? ? ?category
? ? ?<!-- <div ?:class='{swipe:move}'>
? ? ? ?<v-touch @swipeleft="swipeleft" style='width:200px;height:200px;backgroundColor:red;'>Swipe me!</v-touch>
? ? ? ?左滑
? ? ?</div> -->
? ? ? <div >
? ? ? ?<v-touch
? ? ? ? v-on:panstart="swipeleft"
? ? ? ? style='width:200px;height:200px;backgroundColor:red;'
? ? ? ? :pan-options="{ direction: 'horizontal', threshold: 100 }"
? ? ? ? v-bind:enabled="false"
? ? ? ? >Swipe me!</v-touch>
? ? ? ?左滑2
? ? ?</div>
? ? ?<Tabbar/>
? ?</div>
</template><script>
import Tabbar from '@/components/common/tabbar/tabbar.vue'
export default {
? name:'category',
? data(){
? ? return{
? ? ? move:false
? ? }
? },
? components:{
? ? Tabbar
? },
? methods:{
? ? swipeleft()
? ? {
? ? ? // setTimeout(()=>{
? ? ? // ? this.$router.push('/shopcar')
? ? ? // },2000)
? ? ??
? ? ? this.move=true;
? ? ? console.log('左滑');
? ? }
? }
}
</script><style scoped>
.swipe{
? transform: translateX(-100%);
? transition: 2s;
}
</style>以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue.js組件props數(shù)據(jù)驗(yàn)證實(shí)現(xiàn)詳解
這篇文章主要為大家詳細(xì)介紹了Vue.js組件props數(shù)據(jù)驗(yàn)證的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
一文搞懂Vue3中的異步組件defineAsyncComponentAPI的用法
這篇文章主要介紹了一文搞懂Vue3中的異步組件，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-07-07
Vue讓router-view默認(rèn)顯示頁面操作方法
一個home頁面,點(diǎn)擊左邊的菜單欄,右邊顯示頁面,因此都知道在右邊放一個router-view然后配置路由即可,然而問題出現(xiàn)在：重新打開的時候,默認(rèn)是白色空的,遇到這樣的問題如何解決呢,下面小編給大家分享Vue讓router-view默認(rèn)顯示頁面操作方法,感興趣的朋友一起看看吧2024-03-03
這篇文章主要為大家介紹了vue導(dǎo)出excel表格并支持樣式及行高修改，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)搜索功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
Vue2為何能通過this訪問到data與methods的屬性
這篇文章主要介紹了Vue2為何能通過this訪問到data與methods的屬性，文章圍繞主題展開詳細(xì)的內(nèi)容戒殺，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
Vue 動態(tài)生成數(shù)據(jù)字段的實(shí)例
這篇文章主要介紹了Vue 動態(tài)生成數(shù)據(jù)字段的實(shí)例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue?監(jiān)視屬性之天氣案例實(shí)現(xiàn)
這篇文章主要介紹了Vue?監(jiān)視屬性之天氣案例實(shí)現(xiàn)，文章以天氣為例展開介紹Vue?監(jiān)視屬性?的相關(guān)內(nèi)容，需要的小伙伴可以參考一下2022-05-05
vue+element項目實(shí)時監(jiān)聽div寬度的變化
這篇文章主要介紹了vue+element項目里實(shí)時監(jiān)聽某個div寬度的變化,然后執(zhí)行相應(yīng)的事件,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-08-08
Vue生命周期和鉤子函數(shù)的詳解與經(jīng)典面試題
Vue生命周期是指vue實(shí)例對象從創(chuàng)建之初到銷毀的過程,vue所有功能的實(shí)現(xiàn)都是圍繞其生命周期進(jìn)行的,下面這篇文章主要給大家介紹了關(guān)于Vue生命周期和鉤子函數(shù)的相關(guān)資料,需要的朋友可以參考下2021-10-10