美文网首页
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