第一步,下载一个包

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. C# MVC LayUI实现下拉框二级联动

    一.layui.use 1.LayUI的官方使用文档:https://www.layui.com/doc/ 2.layui的内置模块不是默认就加载好的,必须要执行启动模块的这种方法后模块才会加载: 3 ...

  2. APP测试之内存命令查询

    CPU占有率            adb shell dumpsys cpuinfo :获取本机CPU占有率            adb shell dumpsys  cpuinfo | find ...

  3. java方法中开启一个线程

    很多业务场景下需要你在一个方法中去开启一个线程,去跑一些处理时间较长的代码,这样调用方就不必经过长时间的等待了.好了 话不多说  先上代码: package test; public class Th ...

  4. jQuery制作div板块拖动层排序

    html结构: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  5. 洛谷 P6582 【座位调查】

    这道题就两个步骤: 1.找联通块个数:判断是否符合标准并且找联通块个数 我用的广搜实现的,思路挺简单的: 先找一个联通块的端点,根据题中的定义,一个联通块的端点,周围所不是座位的个数(指上下左右),只 ...

  6. 学习前端的时候,突然想起了Sharepoint母版页里的占位符,算知识的融会不?

    今天看到这个段话,我就想起来当时学习Sharepoint的时候,总是搞不明白我们老师讲的那个母版页里的占位符到底是干啥的.现在看到了类似的东西,让我想起来了之前一直搞不懂的东西,很感慨. (完)

  7. java语言进阶(七)_Lambda表达式

    1 函数式编程思想概述 在数学中,函数就是有输入量.输出量的一套计算方案,也就是"拿什么东西做什么事情".相对而言,面向对象过分强调"必须通过对象的形式来做事情" ...

  8. String为什么要设置成Final类型

    ---今天面试碰到个这样的问题:String在设计的时候为什么要设计成final的  当时回答的是String功能已经很丰富了,不需要对其进行扩展,所有巴拉巴拉. 现在来正确看看为什么定义成final ...

  9. CSS粘性定位

    粘性定位(position:sticky) 1.定义 粘性定位可以被认为是相对定位和固定定位的混合.元素在跨越特定阈值前为相对定位,之后为固定定位.(MDN传送门) 这个特定阈值指的是 top, ri ...

  10. 无间歇文字滚动_ 原生js实现新闻无间歇性上下滚动

    这篇文章主要介绍使用js实现文字无间歇性上下滚动,一些网站的公告,新闻列表使用的比较多,感兴趣的小伙伴们可以参考一下 ,代码实现如下. html+css部分: <style> #moocb ...