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 ...
随机推荐
- 关于数据库客户端navicat创建新连接失败的问题
如图是navicat创建新连接的截图: 我就有一个疑问了,主机填localhost或者127.0.0.1都是本机,自然是可以连接成功的,那如果填本机的IP地址会怎样呢? 如下图,出现了报错: 说我的访 ...
- Nginx深入学习(一篇搞定)
我们的口号是:人生不设限! 一.nginx简介 1.什么是nginx Nginx (engine x) 是一个高性能的HTTP和反向代理服务器,特点是占有内存少,并发能力强,事实上nginx的并发 ...
- openstack Rocky 社区版部署1.4 安装数据库
在控制节点安装mariadb,也可以单独服务器安装数据库,假如多个控制节点就在第一台安装数据库,计算节点不需要安装. 1 安装mariadb相关安装包. yum install mariadb mar ...
- eclipse在debug模式下鼠标移动到变量上不显示值的问题
在eclipse中调试时,鼠标移动到变量上不显示值,使用ctrl+shift+i,或者通过配置达到目的: Window->Preferences->Java->Editor-> ...
- DevOps研发模式下「产品质量度量」方案实践
在当今互联网环境下,需求变更越来越快,交付周期却越来越短, 怎么判断一个系统是否测试充分? 产品质量满足什么样的条件才能投产? 如何判断测试工作.研发团队工作的效率是高还是低? 这些问题不能靠感觉.拍 ...
- 《UNIX环境高级编程》(APUE) 笔记第十二章 - 线程控制
12 - 线程控制 GitHub 地址 1. 线程限制 下图为与 线程操作 有关的一些 限制: 可以通过 sysconf 函数进行查询 . 2. 线程属性 可使用 pthread_attr_t 结构修 ...
- 一个很酷炫也挺实用的JS库leader-line
简单粗暴,直入主题,看看效果再说. 是不是这效果挺棒?这样的效果在做系统时,可以有很多的应用,可以让枯燥的页面生动起来. 具体效果,大家可以上这个搜索网站Mag[i]上面看,切身体会一下. 这是一个开 ...
- SharePoint删除图片库文件
SPSecurity.RunWithElevatedPrivileges(delegate() { using (SPSite site = new SPSite(SPContext.Current. ...
- WSL中文本地化
WSL中文本地化 Windows Subsystem for Linux(简称WSL)是一个在Windows 10上能够运行原生Linux二进制可执行文件(ELF格式)的兼容层.它是由微软与Canon ...
- Face The Right Way思维。。。
题目再次链接 题意: 已知01序列a,求进行定长子串取反的最少操作次数,以及最少时的定长. 分析: 首先,先想一想怎么暴力吧.这样想:要保证最小,那么必然不会对同一个区间反转两次,而在k一定时,则不会 ...