第一步,下载一个包

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中使用触摸事件,上滑,下滑,等的更多相关文章

  1. 【转载】Quick 中的触摸事件

    原文地址 http://cn.cocos2d-x.org/article/index?type=quick_doc&url=/doc/cocos-docs-master/manual/fram ...

  2. 关于js-binding中Layer触摸事件的优化

    关于js-binding中Layer触摸事件的优化 cocos2d-x 3.7 1. 目前js中监听触摸事件带来的不便(特别是cocosbuilder) 在目前的js-binding中,如果要监听la ...

  3. Vue基础系列(四)——Vue中的指令(上)

    写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...

  4. js监听事件 上滑消失下滑出现的效果 触摸与手势事件

    https://www.w3cmm.com/javascript/touch.html //触摸与手势事件连接tinyscrollbar //方法1var _this = $('#fabu');var ...

  5. vue中把一个事件绑定到子组件上

    官网上是这样描述的 你可能有很多次想要在一个组件的根元素上直接监听一个原生事件.这时,你可以使用 v-on的 .native 修饰符 父组件App.vue <template> <d ...

  6. iOS中的触摸事件和手势处理

    iOS中的事件可以分为三大类: 1> 触摸事件 2> 加速计事件 3> 远程控制事件 响应者对象 在iOS中不是任何对象都能处理事件,只有继承了UIResponder的对象才能接收并 ...

  7. iOS中的触摸事件,手势识别,摇晃事件等

    在iOS中,事件可以划分为以下几类: 1.触摸事件:通过触摸,手势进行触发(手指点击.缩放等) 2.运动事件:通过加速器触发(例如手机晃动) 3.远程控制事件:通过其他远程设备触发(例如耳机控制按钮) ...

  8. 浅析iOS中的触摸事件

    一.什么是响应者对象? 在 iOS中不是任何对象都能处理事件,只有继承了UIResponder的对象才能接收并处理事件.我们称之为“响应者对象”.UIApplication.UIViewControl ...

  9. 记一笔vue中的中央事件总线的问题,以及解决方案

    代码结构:首先HeaderNav组件是被单独拎出来的,router-view中就对应了内容组件,由于有时候i有的界面的header内容是不一样的,因此要用到兄弟组件的相互通信,这个时候我首先选择了bu ...

随机推荐

  1. TestNG配合catubuter统计单元测试的代码覆盖率

    build-testNG.xml对应的ant脚本为 <?xml version="1.0" encoding="UTF-8"?> <proje ...

  2. 防火墙识别、负载均衡识别、waf识别

    防火墙识别: 通过发送SYN和ACK数据包并分析回包可以大概判断端口是否被防火墙过滤,对应关系如下表: Python代码实现: #!/usr/bin/python from scapy.all imp ...

  3. Netdiscover

    Netdiscover不仅支持主动arp检测,还支持被动的arp检测,即把网卡设置为混杂模式,收取所有局域网内的arp广播数据包,从而判断活着的ip. 主动发现命令格式:netdiscover  -i ...

  4. HTTP 协议详解(二)

    前面一篇已经说过了 HTTP 的基本特性,HTTP 的发展史,前情回顾.这一篇就更详细的 HTTP 协议使用过程一些参数配置,缓存,Cookie设置相关的细节做一些梳理. 数据类型与编码 在 TCP/ ...

  5. 在web开发中,为什么前端比后端更得到转行程序员的青睐?必看!

    1.Web开发分类与区别 人们通常将Web分为前端和后端,前端相关的职位有前端设计师(UI/UE),前端开发工程师,后端相关的有后端开发工程师. 2.技术栈区别 看各大招聘网站上,公司对前端开发工程师 ...

  6. 集群搭建完成简要测试集群(性能)带宽与IOPS

    集群搭建好之后网络,raid卡策略,磁盘都会影响集群的性能.为了避免因上述问题使得集群的性能受到影响,我们依次进行测试,最后得到基本的集群性能. 网络 首先是网络,ceph集群一大堆让人摸不着头脑的问 ...

  7. C++ 调用Python文件方法传递字典参数并接收返回值

    首先本地需要安装有Python环境,然后在c++工程中包含Python的头文件,引用Python的lib库. //python 初始化 Py_Initialize(); if (!Py_IsIniti ...

  8. excel把按行合并的单元格重新拆分

    前言 今天帮朋友弄她excel表格的数据,发现excel表格合并之后,再拆分就不再同一行里面了,导致后面想要拆分回来非常头痛,如下图(下面的数据是模拟的): 可以看到第一例和其他例中间部分为合并的,此 ...

  9. PHPstorm常用快捷键(Windows)

    本文整理本人在日常工作中使用最频繁的PHPstorm快捷键,以作为自己的总结备忘,也希望能够帮到有需要的小伙伴. 以下快捷键大致按本人的使用频率从高到低来介绍. 1.复制.粘贴 Ctrl+c .Ctr ...

  10. 每日一题 - 剑指 Offer 33. 二叉搜索树的后序遍历序列

    题目信息 时间: 2019-06-26 题目链接:Leetcode tag:分治算法 递归 难易程度:中等 题目描述: 输入一个整数数组,判断该数组是不是某二叉搜索树的后序遍历结果.如果是则返回 tr ...