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这只是其中的一种,后续更新

原文地址:https://www.cnblogs.com/chenyudi/p/12419544.html

时间: 2024-10-07 06:42:56

vue中使用触摸事件,上滑,下滑,等的相关文章

Android中TouchEvent触摸事件机制

当我们的手指在Android屏幕上点击或滑动时,就会触发触摸事件TouchEvent.在App中ViewGroup和View存在多级嵌套,在最外层的是Activity,最内层的View,介于Activity与View之间的是一些ViewGroup.本文为了简化讨论,我们假设一个Activity中只有一个ViewGroup,这个ViewGroup中只有一个View.当我们用手指触摸到View的UI时,就会产生触摸事件TouchEvent,总的过程如下图所示: 首先是最外层的Activity接收到该

【转载】Quick 中的触摸事件

原文地址 http://cn.cocos2d-x.org/article/index?type=quick_doc&url=/doc/cocos-docs-master/manual/framework/quick/V3/touch-events/zh.md Quick 中的触摸事件 Cocos2d-x 原本的触摸机制存在一些限制,在使用中需要开发者做不少额外的处理.所以 Quick-Cocos2d-x 提出了自己的一套触摸机制.本文详细介绍了这套新机制的用法. 显示层级 在 Cocos2d-x

Lua中添加触摸事件

1首先,lua中的触摸事件与cocos2d中的触摸事件相似,都需要添加监听者,都需要将监听者添加到触摸事件分发器中去 local listener=cc.EventListenerTouchOneByOne:create() listener:registerScriptHandler(onTouchBegan,cc.Handler.EVENT_TOUCH_BEGAN ) listener:registerScriptHandler(onTouchEnded,cc.Handler.EVENT_T

关于在Cocos2dx中注册触摸事件——Lua

关于在Cocos2dx中注册触摸事件,之前一直对此一知半解,这两天在看引擎的源码,趁此机会写下来... 以下纯属个人理解,如有不对欢迎指正... 在引擎的CCLayer类中声明了有四个方法: 1 virtual bool onTouchBegan(Touch *touch, Event *unused_event); 2 virtual void onTouchMoved(Touch *touch, Event *unused_event); 3 virtual void onTouchEnde

微信小程序监听用户上滑下滑事件

今天做了一个要根据用户上滑或者下滑来显示不同内容的功能. 思路:先监听用户是上滑还是下滑,监听到结果后改变data数据中用来判断模块显示隐藏的变量,两个需要切换的模块使用两个hidden,data中定义两个变量来接受更改后的true或者false 页面 hidden='{{bottom}}' hidden='{{top}}' data{ //初始化状态 top:true, bottom:false, } //判断浏览器滚动条上下滚动 if (t.scrollTop > a.data.scroll

微信 判断 上滑 下滑 操作

1:判断用户动作,"向上滑动" 或者 "向下滑动",闲话不多说,直接上代码: 方法1 ( 利用 bindtouchmove,缺点:可能会频繁操作 setData 方法 ) : <view wx:for="{{list}}" id="{{item}}" wx:key="{{index}}" bindtouchmove="checktouchmove" class="know

QUICK 中的触摸事件

本文转载于:http://www.cocos2d-x.org/docs/manual/framework/quick/V3/touch-events/zh Cocos2d-x 原本的触摸机制存在一些限制,在使用中需要开发者做不少额外的处理.所以 Quick-Cocos2d-x 提出了自己的一套触摸机制.本文详细介绍了这套新机制的用法. 显示层级 在 Cocos2d-x 里,整个游戏的画面是由一系列的 Scene, Node, Sprite, Layer 等对象构成的.而所有这些对象都是从 Nod

UIResponder 类中的触摸事件响应方法

touchesBegan:withEvent:-当触摸事件处于"起步阶段"(starting phase),也就是用户刚开始触碰屏幕时,系统会调用这个方法. touchesMoved:withEvent:-当用户触摸屏幕并持续在屏幕上移动手指时,系统会调用这个方法. touchesEnded:withEvent:-当用户触摸屏幕的一根手指或所有手指都从屏幕上拿开时,触摸过程就结束了,而系统此时会调用这个方法.如果在用户移动手指的过程中程序做了一些处理,那么此时应该会执行相关的清理工作.

iOS开发笔记--iOS中的触摸事件和手势处理

iOS中的事件可以分为三大类:原文:http://my.oschina.net/aofe/blog/268749 1> 触摸事件 2> 加速计事件 3> 远程控制事件 响应者对象 在iOS中不是任何对象都能处理事件,只有继承了UIResponder的对象才能接收并处理事件.我们称之为"响应者对象". UIApplication,UIViewController,UIView都继承自UIResponder,因此它们都是响应者对象,都能够接收并处理事件. UIRespon