vue中使用触摸事件,上滑,下滑,等
第一步,下载一个包
npm install kim-vue-touch -s
在当前项目中下载包
第二部
import vueTouch from 'kim-vue-touch'
Vue.use(vueTouch)
- kim-vue-touch提供了点击、长按、左滑、右滑、上滑、下滑等事件,
- 当你不需要传参时可以通过v-tap="vueTouch"的形式调用方法,
- 当你需要传参时v-tap="(e)=>vueTouch('点击',e)"的方式调用,e是event对象
- 当指令搭配v-for使用时,一定要确保key值的唯一性,否则不能保证数据刷新之后事件被重新绑定(参考vue就地复用机制)
- 尽量避免对数组、对象的直接赋值操作,可能会导致参数不更新
使用

<template>
<div class="box"
v-tap="(e)=>vueTouch('点击',e)"
v-longtap="(e)=>vueTouch('长按',e)"
v-swipeleft="(e)=>vueTouch('左滑',e)"
v-swiperight="(e)=>vueTouch('右滑',e)"
v-swipeup="(e)=>vueTouch('上滑',e)"
v-swipedown="(e)=>vueTouch('下滑',e)"
></div>
</template>
<script>
export default {
name: 'App',
data () {
return {
name:'touch',
}
},
methods:{
vueTouch:function(txt,e){
this.name = txt;
}
}
}
</script>
来源: https://github.com/904790204/vue-touch
这只是其中的一种,后续更新
vue中使用触摸事件,上滑,下滑,等的更多相关文章
- 【转载】Quick 中的触摸事件
原文地址 http://cn.cocos2d-x.org/article/index?type=quick_doc&url=/doc/cocos-docs-master/manual/fram ...
- 关于js-binding中Layer触摸事件的优化
关于js-binding中Layer触摸事件的优化 cocos2d-x 3.7 1. 目前js中监听触摸事件带来的不便(特别是cocosbuilder) 在目前的js-binding中,如果要监听la ...
- Vue基础系列(四)——Vue中的指令(上)
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...
- js监听事件 上滑消失下滑出现的效果 触摸与手势事件
https://www.w3cmm.com/javascript/touch.html //触摸与手势事件连接tinyscrollbar //方法1var _this = $('#fabu');var ...
- vue中把一个事件绑定到子组件上
官网上是这样描述的 你可能有很多次想要在一个组件的根元素上直接监听一个原生事件.这时,你可以使用 v-on的 .native 修饰符 父组件App.vue <template> <d ...
- iOS中的触摸事件和手势处理
iOS中的事件可以分为三大类: 1> 触摸事件 2> 加速计事件 3> 远程控制事件 响应者对象 在iOS中不是任何对象都能处理事件,只有继承了UIResponder的对象才能接收并 ...
- iOS中的触摸事件,手势识别,摇晃事件等
在iOS中,事件可以划分为以下几类: 1.触摸事件:通过触摸,手势进行触发(手指点击.缩放等) 2.运动事件:通过加速器触发(例如手机晃动) 3.远程控制事件:通过其他远程设备触发(例如耳机控制按钮) ...
- 浅析iOS中的触摸事件
一.什么是响应者对象? 在 iOS中不是任何对象都能处理事件,只有继承了UIResponder的对象才能接收并处理事件.我们称之为“响应者对象”.UIApplication.UIViewControl ...
- 记一笔vue中的中央事件总线的问题,以及解决方案
代码结构:首先HeaderNav组件是被单独拎出来的,router-view中就对应了内容组件,由于有时候i有的界面的header内容是不一样的,因此要用到兄弟组件的相互通信,这个时候我首先选择了bu ...
随机推荐
- Python实用笔记 (14)函数式编程——匿名函数
当我们在传入函数时,有些时候,不需要显式地定义函数,直接传入匿名函数更方便. 在Python中,对匿名函数提供了有限支持.还是以map()函数为例,计算f(x)=x2时,除了定义一个f(x)的函数外, ...
- MySQL统计库表大小
统计每个库每个表的大小是数据治理的其中最简单的一个要求,本文将从抽样统计结果及精确统计结果两方面来统计MySQL的每个库每个表的数据量情况. 1.统计预估数据量 mysql数据字典库informati ...
- JavaScript基础数组的字面声名法(010)
1.两种方法的对比 数组在JavaScript中,就像大多数的其它语言 一样,是对象.我们可以使用JavaScript内置的数组构造函数Array()来创建数组.就象对象的字面声名法一样,数组也可以采 ...
- struts2+hibernate+spring简单整合且java.sql.SQLException: No suitable driver 问题解决
最近上j2ee的课,老师要求整合struts2+hibernate+spring,我自己其实早早地有准备弄的,现在都第9个项目了,无奈自己的思路和头绪把自己带坑了,当然也是经验问题,其实只是用myec ...
- 转载--- 写给Node.js学徒的7个建议
贴士 1: 在开发环境使用nodemon,在生产环境使用pm2 当你第一次开发Node.js应用的时候, 其中一件事情就是一次又一次的运行[file].js 就和揭伤疤一样. 当我第一次开发的node ...
- call,apply,bind的内部原理实现
call call 方法使用一个函数执行的时候更改本身 this 指向,并传入一个或者多个参数. var obj = { name: '$call' } function _fun() { conso ...
- TallestCow
简单解说 建立差分数组. 以最高的牛为高度基点,假设牛A和牛B能相互看见,就把牛A和牛B中间的牛高度都-1 最后对每头牛直接计算输出即可. 需要注意的是他给出的关系中:两头牛的顺序可能是颠倒的,而且关 ...
- [JAVA]《JAVA开发手册》规约详解
[强制] 使用 Map 的方法 keySet()/values()/entrySet()返回集合对象时,不可以对其进行添加元素操作,否则会抛出 UnsupportedOperationExceptio ...
- ES6入门(二)
目录 ES6入门(二) es6之解构赋值 数组的解构赋值 对象的解构赋值 字符串的解构赋值 数值和布尔值的解构赋值 函数参数的解构赋值 圆括号问题 ES6入门(二) es6之解构赋值 数组的解构赋值 ...
- SpringBoot执行定时任务@Scheduled
SpringBoot执行定时任务@Scheduled 在做项目时,需要一个定时任务来接收数据存入数据库,后端再写一个接口来提供该该数据的最新的那一条. 数据保持最新:设计字段sign的值(0,1)来设 ...