vue?vue-touch移動(dòng)端手勢(shì)詳解
更新時(shí)間：2022年03月28日 10:32:32 作者：神奇大叔
這篇文章主要介紹了vue?vue-touch移動(dòng)端手勢(shì)詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
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注冊(cè)的name名稱，默認(rèn)該標(biāo)簽為div
v-touch
(1)替換標(biāo)簽
tag="要變成的標(biāo)簽名稱,默認(rèn)為div"
(2)定義手勢(shì)
@事件類型='回調(diào)'
(3)配置手勢(shì)事件選項(xiàng)
:小寫(xiě)事件類型名稱-options="{ direction: 'horizontal', threshold: 100 }
threshold臨界值directions方向: 'up', 'down', 'left', 'right', 'horizontal', 'vertical', 'all'- 具體配置查看
hammerjs
(4)阻止/觸發(fā)手勢(shì)
:enabled="true/false" ?
允許/禁止所有的手勢(shì)
:enabled="{ pinch: true, rotate: false }" ?允許和禁止指定手勢(shì)
(5)公共組件方法
1、通過(guò)ref獲取到該標(biāo)簽
2、在方法中
this.$refs.tapper.disable('tap')公共方法
disable('手勢(shì)名稱')enable('手勢(shì)名稱')toggle('手勢(shì)名稱')disableAll()disable all RecognizersenableAll()enable all RecognizersisEnabled('手勢(shì)名稱')
(6)自定義手勢(shì)
在main.js中,在Vue.use之前使用
VueTouchVueTouch.registerCustomEvent('doubletap', {
? type: '手勢(shì)名稱',
? ...手勢(shì)事件的配置選項(xiàng),見(jiàn)(3)
? taps: 2 ?對(duì)應(yīng)tap手勢(shì)的觸發(fā)點(diǎn)擊次數(shù)配置
})
> ...</v-touch>4、事件類型
Pan平移
panpanstartpanmovepanendpancancelpanleftpanrightpanuppandown
Pinch縮放
pinchpinchstartpinchmovepinchendpinchcancelpinchinpinchout
Press按壓
presspressup
Rotate旋轉(zhuǎn)
rotaterotatestartrotatemoverotateendrotatecancel
Swipe滑動(dòng)
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>以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
在vue中created、mounted等方法使用小結(jié)
這篇文章主要介紹了在vue中created、mounted等方法使用小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
關(guān)于element中對(duì)el-input 自定義驗(yàn)證規(guī)則
這篇文章主要介紹了關(guān)于element中對(duì)el-input 自定義驗(yàn)證規(guī)則，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue-cli腳手架-bulid下的配置文件,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
過(guò)濾器是vue為開(kāi)發(fā)者提供的功能，常用于文本的格式化，過(guò)濾器應(yīng)該被添加在JavaScrip表達(dá)式的尾部，由“管道符”進(jìn)行調(diào)用，這篇文章通過(guò)案例給大家講解Vue過(guò)濾器介紹及使用方法，需要的朋友參考下吧2022-11-11
這篇文章主要介紹了通過(guò)vue刷新左側(cè)菜單欄操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
這篇文章主要介紹了vue中的主動(dòng)觸發(fā)點(diǎn)擊事件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家介紹了vue3 diff 的算法示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要為大家介紹了Vue之組件的自定義事件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-11-11
這篇文章主要介紹了vue鼠標(biāo)懸停事件，本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-04-04
淺談一下Vue生命周期中mounted和created的區(qū)別
每一個(gè)vue實(shí)例從創(chuàng)建到銷毀的過(guò)程，就是這個(gè)vue實(shí)例的生命周期,在這個(gè)過(guò)程中，他經(jīng)歷了從開(kāi)始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載Dom、渲染→更新→渲染、卸載等一系列過(guò)程,那么這些過(guò)程中，具體vue做了些啥，我們今天來(lái)了解一下2023-05-05