首页 > 移动平台 > 详细

vue移动端touch插件

时间:2020-08-03 00:31:57      阅读:263      评论:0      收藏:0      [点我收藏+]

方法一、v-touch 官网地址

包括单击、双击、长按、缩放等手势事件

安装

npm install vue-touch@next --save

 

引入

main.js中引入:

import VueTouch from ‘vue-touch‘
Vue.use(VueTouch, {name: ‘v-touch‘})

 

使用

html代码

<template>
  <v-touch v-on:swipeleft="swiperleft" v-on:swiperight="swiperright" class="wrapper">
      <div class="menu-container" ref="menuContainer">    
    <!-- 这个是内容 -->  
      </div>
  </v-touch>
</template>

 

js代码

export default {
  name: ‘Queue‘,
  data () {
    return {
    
    }
  },
  methods: {
    swiperleft: function () {
      this.$router.push({‘path‘:‘/queuehistory‘});
    },
    swiperright: function () {
      this.$router.push({‘path‘:‘/home‘});
    }
  }

}

 

 

方法二:AlloyFinger (腾讯的) 官网地址

包括单击、双击、长按、缩放等手势事件

 

安装

npm install alloyfinger

 

在使用vue页面中引入

import AlloyFinger from ‘alloyfinger‘

 

方法调用

var af = new AlloyFinger(element, {
    touchStart: function () { },
    touchMove: function () { },
    touchEnd:  function () { },
    touchCancel: function () { },
    multipointStart: function () { },
    multipointEnd: function () { },
    tap: function () { },
    doubleTap: function () { },
    longTap: function () { },
    singleTap: function () { },
    rotate: function (evt) {
        console.log(evt.angle);
    },
    pinch: function (evt) {
        console.log(evt.zoom);
    },
    pressMove: function (evt) {
        console.log(evt.deltaX);
        console.log(evt.deltaY);
    },
    swipe: function (evt) {
        console.log("swipe" + evt.direction);
    }
});

 

vue移动端touch插件

原文:https://www.cnblogs.com/woniu666/p/13424007.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!