美文网首页
vue手势AlloyFinger用法

vue手势AlloyFinger用法

作者: 喵呜Yuri | 来源:发表于2019-01-11 15:32 被阅读112次

下载:

npm install alloyfinger

main.js

import AlloyFinger from 'alloyfinger'
import AlloyFingerPlugin from 'alloyfinger/vue/alloy_finger_vue'

Vue.use(AlloyFingerPlugin,{
  AlloyFinger
})

XXX.vue:

<div class="songlist-row-s"  v-finger:swipe="swipeHandler">
//滑动的有效区域
</div>

   methods:{
        swipeHandler(e){
          console.log("swipe" + e.direction);
        }
......

亲测有效
其他手勢方法:


var h = new Vue({
    el: '#cnt',
    methods: {
        tap: function() { console.log('onTap'); },
        multipointStart: function() { console.log('onMultipointStart'); },
        longTap: function() { console.log('onLongTap'); },
        swipe: function(evt) {
            console.log("swipe" + evt.direction);
            console.log('onSwipe');
        },
        pinch: function(evt) { 
            console.log(evt.scale);
            console.log('onPinch'); 
        },
        rotate: function(evt) {
            console.log(evt.angle);
            console.log('onRotate'); 
        },
        pressMove: function(evt) { 
            console.log(evt.deltaX);
            console.log(evt.deltaY);
            console.log('onPressMove'); 
        },
        multipointEnd: function() { console.log('onMultipointEnd'); },
        doubleTap: function() { console.log('onDoubleTap'); },
        singleTap: function () { console.log('onSingleTap'); },

        touchStart: function() { console.log('onTouchStart'); },
        touchMove: function() { console.log('onTouchMove'); },
        touchEnd: function() { console.log('onTouchEnd'); },
        touchCancel: function() { console.log('onTouchCancel'); }
    }
});

喜欢点个小心心给我哦~~~

相关文章

网友评论

      本文标题:vue手势AlloyFinger用法

      本文链接:https://www.haomeiwen.com/subject/wypxdqtx.html