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ā)點擊次數(shù)配置
})
> ...</v-touch>4、事件類型
Pan平移
panpanstartpanmovepanendpancancelpanleftpanrightpanuppandown
Pinch縮放
pinchpinchstartpinchmovepinchendpinchcancelpinchinpinchout
Press按壓
presspressup
Rotate旋轉(zhuǎn)
rotaterotatestartrotatemoverotateendrotatecancel
Swipe滑動
swipeswipeleftswiperightswipeupswipedown
Tap點擊
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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
在vue中created、mounted等方法使用小結(jié)
這篇文章主要介紹了在vue中created、mounted等方法使用小結(jié)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
關(guān)于element中對el-input 自定義驗證規(guī)則
這篇文章主要介紹了關(guān)于element中對el-input 自定義驗證規(guī)則，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue-cli腳手架-bulid下的配置文件,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
過濾器是vue為開發(fā)者提供的功能，常用于文本的格式化，過濾器應(yīng)該被添加在JavaScrip表達(dá)式的尾部，由“管道符”進(jìn)行調(diào)用，這篇文章通過案例給大家講解Vue過濾器介紹及使用方法，需要的朋友參考下吧2022-11-11
這篇文章主要介紹了通過vue刷新左側(cè)菜單欄操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了vue中的主動觸發(fā)點擊事件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家介紹了vue3 diff 的算法示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要為大家介紹了Vue之組件的自定義事件，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
這篇文章主要介紹了vue鼠標(biāo)懸停事件，本文通過示例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-04-04
淺談一下Vue生命周期中mounted和created的區(qū)別
每一個vue實例從創(chuàng)建到銷毀的過程，就是這個vue實例的生命周期,在這個過程中，他經(jīng)歷了從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載Dom、渲染→更新→渲染、卸載等一系列過程,那么這些過程中，具體vue做了些啥，我們今天來了解一下2023-05-05