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 ...
随机推荐
- Codeforces Round #652 (Div. 2) 总结
A:问正n边形的一条边和x轴平行的时候有没有一条边和y轴重合,直接判断n是否是4的倍数 #include <iostream> #include <cstdio> #inclu ...
- matlab批量处理数据的方法
问题描述: 有多个.mat格式数据(本文数据名称:‘buf_026.mat’),要抽取其中的数据进行运算,结果返回到数组/xlsx等 关键字:num2str/ xlsxwrite/ eval/ 元胞数 ...
- 传统声学模型之HMM和GMM
声学模型是指给定声学符号(音素)的情况下对音频特征建立的模型. 数学表达 用 \(X\) 表示音频特征向量 (观察向量),用 \(S\) 表示音素 (隐藏/内部状态),声学模型表示为 \(P(X|S) ...
- Spring Boot — 运行应用程序5种方式
1. 从IDE中的Run 按钮运行 你可以从IDE中运行Spring Boot应用, 就像一个简单的Java应用, 但是, 你首先需要导入项目. 导入步骤跟你的IDE和构建系统有关. 大多数IDEs能 ...
- win7旗舰版安装 oracle 10g 不能进入图形界面的问题
前阵子重装了系统,把dell机器自带的win7 64位(家庭版已升级旗舰版,装ORACLE正常)换回了32位系统,前两天因为一些软件开发的问题,需要把以前做的一个系统重新架起来,数据库用的是oracl ...
- [区间+线性dp]数字游戏
题目描述 丁丁最近沉迷于一个数字游戏之中.这个游戏看似简单,但丁丁在研究了许多天之后却发觉原来在简单的规则下想要赢得这个游戏并不那么容易.游戏是这样的,在你面前有一圈整数(一共\(n\)个),你要按顺 ...
- 【spring boot】spring boot 拦截器
今日份代码: 1.定义拦截器 import com.alibaba.fastjson.JSON; import org.apache.commons.collections.CollectionUti ...
- 让对象拥有状态——C#中的状态模式
大家好,老胡又在博客和大家见面了,在聊今天的主角之前,老胡先给大家讲一个以前发生的故事. 真实的故事 当老胡还是小胡的时候,跟随团队一起开发一款游戏.这款游戏是一款末日生存类游戏,玩家可以 收集资 ...
- 【PyMuPDF和pdf2image】Python将PDF转成图片
前言: 在最近的测试中遇到一个与PDF相关的测试需求,其中有一个过程是将PDF转换成图片,然后对图片进行测试. 粗略的试了好几种方式,其中语言尝试了Python和Java,总体而言所找到的Python ...
- CTF_show平台 web题解 part3
web13 题目显示文件上传,各类型上传均提示错误,在使用ctf-scan扫描的时候,发现upload.php.bak. 查看源码: <?php header("content-typ ...