vue vue-touch移动端手势详解

目录
  • 1、安装
  • 2、引入
  • 3、使用
    • (1)替换标签
    • (2)定义手势
    • (3)配置手势事件选项
    • (4)阻止/触发手势
    • (5)公共组件方法
    • (6)自定义手势
  • 4、事件类型
    • Pan平移
    • Pinch缩放
    • Press按压
    • Rotate旋转
    • Swipe滑动
    • Tap点击
  • 代码示例

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名称，默认该标签为div

  • v-touch 

(1)替换标签

tag="要变成的标签名称,默认为div"

(2)定义手势

@事件类型='回调'

(3)配置手势事件选项

:小写事件类型名称-options="{ direction: 'horizontal', threshold: 100 }

  • threshold临界值
  • directions方向: 'up', 'down', 'left', 'right', 'horizontal', 'vertical', 'all'
  • 具体配置查看hammerjs

(4)阻止/触发手势

:enabled="true/false"  

允许/禁止所有的手势

:enabled="{ pinch: true, rotate: false }"  

允许和禁止指定手势

(5)公共组件方法

1、通过ref获取到该标签

2、在方法中

this.$refs.tapper.disable('tap')

公共方法

  • disable('手势名称')
  • enable('手势名称')
  • toggle('手势名称')
  • disableAll() disable all Recognizers
  • enableAll() enable all Recognizers
  • isEnabled('手势名称')

(6)自定义手势

在main.js中,在Vue.use之前使用

VueTouchVueTouch.registerCustomEvent('doubletap', {
  type: '手势名称',
  ...手势事件的配置选项,见(3)
  taps: 2  对应tap手势的触发点击次数配置
})
> ...</v-touch>

4、事件类型

Pan平移

  • pan
  • panstart
  • panmove
  • panend
  • pancancel
  • panleft
  • panright
  • panup
  • pandown

Pinch缩放

  • pinch
  • pinchstart
  • pinchmove
  • pinchend
  • pinchcancel
  • pinchin
  • pinchout 

Press按压

  • press
  • pressup 

Rotate旋转

  • rotate
  • rotatestart
  • rotatemove
  • rotateend
  • rotatecancel

Swipe滑动

  • swipe
  • swipeleft
  • swiperight
  • swipeup
  • swipedown

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>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue实现移动端左右滑动效果的方法

    1. 最近得到一个新需求,需要在Vue项目的移动端页面上加上左右滑动效果,在网上查阅资料,最终锁定了vue-touch 2. 下载vue-touch (https://github.com/vuejs/vue-touch/tree/next) 注意:如果Vue是2.x 的版本的话,一定要下next分支上的. 3. 使用: 3.1 npm install vue-touch@next --save 3.2 在main.js 中 引入: import VueTouch from 'vue-touch

  • vue2.0移动端滑动事件vue-touch的实例代码

    Vue-touch的使用 有时候我们不止需要有返回键,也要有手势滑动切换页面的功能时,这个时候vue-touch就派上用场了 API地址: https://github.com/vuejs/vue-touch/tree/next 安装 npm insall vue-touch@next --save //main.js中引入: import VueTouch from 'vue-touch' Vue.use(VueTouch, {name: 'v-touch'}) 用法如下: //html代码

  • vue自定义移动端touch事件之点击、滑动、长按事件

    用法: **HTML** <div id="app" class="box" v-tap="vuetouch" //vuetouch为函数名,如没有参数,可直接写函数名 v-longtap="{fn:vuetouch,name:'长按'}" //如果有参数以对象形式传,fn 为函数名 v-swipeleft="{fn:vuetouch,name:'左滑'}" v-swiperight="{f

  • vue移动端实现手指滑动效果

    vue移动端实现手指滑动效果

    本文实例为大家分享了vue移动端实现手指滑动效果的具体代码,供大家参考,具体内容如下 滑动时候黄色块宽度跟着变化 通过touch点击实现 目前感觉宽度变化有点问题,还在思考中 下面上代码: <template lang="html"> <div class="back" ref="back" @touchstart.prevent="touchStart" @touchmove.prevent="t

  • vue vue-touch移动端手势详解

    目录 1.安装 2.引入 3.使用 (1)替换标签 (2)定义手势 (3)配置手势事件选项 (4)阻止/触发手势 (5)公共组件方法 (6)自定义手势 4.事件类型 Pan平移 Pinch缩放 Press按压 Rotate旋转 Swipe滑动 Tap点击 代码示例 1.安装 cnpm install vue-touch@next --save 2.引入 在main.js中 import VueTouch from 'vue-touch' Vue.use(VueTouch, {name: 'v-t

  • vue vue-touch移动端手势详解

    目录 1.安装 2.引入 3.使用 (1)替换标签 (2)定义手势 (3)配置手势事件选项 (4)阻止/触发手势 (5)公共组件方法 (6)自定义手势 4.事件类型 Pan平移 Pinch缩放 Press按压 Rotate旋转 Swipe滑动 Tap点击 代码示例 1.安装 cnpm install vue-touch@next --save 2.引入 在main.js中 import VueTouch from 'vue-touch' Vue.use(VueTouch, {name: 'v-t

  • vue组件间的参数传递实例详解

    场景分析 在前端开发中,我们常常会运用到"组件库".在main入口中引入组件库,就可以很轻松的在页面中引入,并做一些基本的配置,如样式,颜色等.只需要在引入的组件中写入特定的属性,就能够定义. 举例说明 例如:element-ui组件库中使用switch开关,有个属性active-color是设置"打开时"的背景色.change事件是触发状态的事件. <el-switch v-model="value" :active-color=&quo

  • vue数据初始化initState的实例详解

    数据初始化 Vue 实例在建立的时候会运行一系列的初始化操作,而在这些初始化操作里面,和数据绑定关联最大的是 initState. 首先,来看一下他的代码: function initState(vm) { vm._watchers = []; var opts = vm.$options; if(opts.props) { initProps(vm, opts.props); //初始化props } if(opts.methods) { initMethods(vm, opts.method

  • 封装一下vue中的axios示例代码详解

    在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中.他有很多优秀的特性,例如拦截请求和响应.取消请求.转换json.客户端防御cSRF等.所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护,直接推荐我们使用axios库.如果还对axios不了解的,可以移步axios文档. 安装 npm install axios; // 安装axios 好了,下面开始今天的正文. 此次封装用以解决: (

  • vue3中vue.config.js配置及注释详解

    vue3中vue.config.js配置及注释详解

    目录 报错 打包时提示文件过大,配置解决方案,如下 总结 报错 asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).This can impact web performance.entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit

  • Vue echarts模拟后端数据流程详解

    Vue echarts模拟后端数据流程详解

    目录 KOA2的使用 安装 Koa app.js入口文件 KOA2的使用 KOA2是由Express 原班人马打造. 环境依赖 Node v7.6.0 及以上. 支持 async 和 await 洋葱模型的中间件 写响应函数(中间件) 响应函数是通过use的方式才能产生效果, 这个函数有两个参数, ctx :上下文, 指的是请求所处于的Web容器,我们可以通过 ctx.request 拿到请求对象, 也可 以通过 ctx.response 拿到响应对象 next :内层中间件执行的入口 模拟服务

  • vue组件间通信子与父详解（二）

    接着vue组件父与子通信详解继续学习. 二.组件间通信(子组件传值给父组件) 通过事件的方式来完成数据的传输. ①在父组件中 定义一个方法,用来接收子组件所通过事件传来的值 methods:{ recvMsg:function(msg){ //参数msg就是子组件通过事件出来的数据 } } ②绑定事件处理函数 事件一般情况 都是自定义事件 <child-component @myEvent="recvMsg"></child-component> ③在子组件触发

  • vue.js+boostrap项目实践(案例详解)

    vue.js+boostrap项目实践(案例详解)

    一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变得更美观和更容易,同时vue.js又是可以绑定model和view(这个相当于MVC中的,M和V之间的关系),使得对数据变换的操作变得更加的简易,简化了很多的逻辑代码. 二.学习这篇文章需要具备的知识 1.需要有vue.js的知识 2.需要有一定的HTML.CSS.JavaScript的基础知识 3

  • Vue和Bootstrap的整合思路详解

    ldlood同学推荐 element ui(饿了么基于vue出品)也不错, github地址:https://github.com/ElemeFE/element. 大家也可以关注一下 我是一个刚刚接触前端开发的新手,所以有必要记录如何将Bootstrap和Vue进行整合. 如果你是老手,请直接绕道而过.作为一个新手,里面的步骤,过程或者专业术语未必正确,如果你发现哪里错误了,请发邮件至ztao8607@gmail.com Vue官方不建议新手直接使用vue-cli,但我不这么看. 先使用cli

随机推荐