vue2.0移动端滑动事件vue-touch

最新推荐文章于 2024-05-12 09:30:27 发布
最新推荐文章于 2024-05-12 09:30:27 发布
阅读量5.1w 收藏 10
点赞数
分类专栏： vue-js 文章标签： vue vue-touch
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_38069630/article/details/78749048
版权

https://github.com/vuejs/vue-touch/tree/next

cnpm install vue-touch@next
var VueTouch = require('vue-touch')
Vue.use(VueTouch, {name: 'v-touch'})
//左划      默认渲染为div   data为参数
<v-touch v-on:swipeleft="onSwipeLeft(data)">Swipe me!</v-touch>
//点击   渲染为一个a标签
<v-touch tag="a" v-on:tap="onTap">Tap me!</v-touch>
//点击   渲染为p标签
<v-touch tag="p" v-on:tap="onTap">Tap me!</v-touch>
你蠢哭我咯
关注
  • 0
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue自定义移动端touch事件，点击、滑动、长按事件
09-30
vue自定义移动端touch事件，点击、滑动、长按事件.将以上代码保存到一个js文件内，引入到页面vue库文件之后、用户js文件之前。这样就可以使用vue的触屏事件了。
vue2.0的移动端的touch事件
weixin_30627381的博客
04-11 497
vue2.0的移动端的touch事件 touch的开始事件是@touchstart， 移动过程是@touchmove, 结束事件是@touchend 转载于:https://www.cnblogs.com/l-y-z/p/8795292.html
推荐开源项目：Vue-Touch - 轻巧的Vue.js触摸事件插件
最新发布
gitblog_00036的博客
05-12 398
推荐开源项目：Vue-Touch - 轻巧的Vue.js触摸事件插件 项目地址:https://gitcode.com/vuejs/vue-touch 1、项目介绍 Vue-Touch是一个针对Vue.js框架的插件，用于处理和封装触摸事件。尽管目前这个分支不支持Vue 2.0，但它是基于Hammer.js 2.0构建的，提供了强大的手势识别功能。尽管当前项目不再维护，但它在Vue 1.0项目中仍...
vue中使用vue-touch
qq_43235503的博客
12-06 6018
vue中使用vue-touch
vue webapp滑动事件_移动端网页上下滑动的事件
weixin_36212135的博客
01-13 1177
前面写过1篇 jquery mobile.js的swipe事件，来实现开关按钮的效果。查看资料后发现，swipe事件左右事件，移动端的上下滑动事件并不是用swipe.网上搜索之后，发现移动端的原生事件touch可以解决这个问题。touch事件本文例子的要求是：上下滑动超过给定的像素，隐藏/显示页面的元素。开始是隐藏的状态。注意，touch事件并需要引入任何的js库。1元许愿.div1{width:...
vue-touch for vue2.xxx
Cool的博客
10-27 2562
https://github.com/vuejs/vue-touch/tree/next     vue-touch Touch events plugin for Vue.js this is a BETA Release   This is a component wrapper for Hammer.js 2.0. Install This plugin require...
vue2.0移动端滑动事件vue-touch的实例代码
12-13
有时候我们不止需要有返回键，也要有手势滑动切换页面的功能时，这个时候vue-touch就派上用场了 API地址： https://github.com/vuejs/vue-touch/tree/next 安装 npm insall vue-touch@next --save //main.js中引入...
vue自定义移动端touch事件之点击、滑动、长按事件
08-27
Vue自定义移动端Touch事件之点击、滑动、长按事件 在移动端开发中，Touch事件是非常重要的一部分，我们经常需要监听用户的触摸操作，如点击、滑动、长按等。Vue框架提供了多种方式来处理Touch事件，但是在实际开发...
vue-touch上下滑动的问题
zsq199771的博客
03-02 1342
首先 是一个手势组件 问题出在左右手势加好了以后，上下滑动的时候，window端是感觉不到的，超出部分正常滑动 但是移动端或者触摸大屏端不能拖拽滑动。 只需要在组件上加 class="v-touch" 然后css .v-touch{ touch-action: pan-y!important; } 就OOOOO了 ......
Vue中如何进行移动端手势操作？
it_xushixiong的博客
06-14 2445
除了使用第三方插件，我们还可以自己编写指令来实现移动端手势操作。下面是一个简单的示例代码。
vue 自定义事件（移动端上下左右滑动长按）
weixin_43824144的博客
10-23 1668
新建一个js 文件 内容如下 /** * 处理 移动设备上的 点击、长按、左右上下滑动 事件 * * ========================================= * 导出了7个自定义指令： * v-tap： tap点击事件 * v-swipe： swipe滑动事件 * v-swipeleft： swipeleft左滑事件 * v-swiperight...
vue 通讯录向上滑动事件
10-30
第一个是在通讯录右边的索引条上进行滑动，滑动到相应字母就跳转到相应字母的锚点上。
解决vue的touchStart事件及click事件冲突问题
10-15
主要介绍了解决vue的touchStart事件及click事件冲突问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
关于v-touch插件上下滑动事件
Brand_heeee的博客
03-09 590
一：安装 1、npm install vue-touch@next -S 二： main.js引入 1、importVueTouch from'vue-touch' 2、Vue.use(VueTouch, {name:'v-touch'}) 三：参考代码 <template> <v-touch v-on:swipeup="swiperup" v-on:swipedown="swiperdown" class="wrapper v-touch" tag="div"&g...
Activity实现监听手指上下左右滑动
冬ji陽光
04-15 515
由于公司需要在一个项目上添加感应鼠标上下滑动实现翻页的效果，所以特地百度研究了下onTouchEvent事件，在博客上发现了一个很好的解决方法，既简单，又高效，事后想要总结时，却发现怎么也找不到那个博客了，所以这里先对原创说声抱歉，等找到后在贴出你的地址。好了，废话不多说，上代码。 public class MainActivity extends Activity { //手指按下的点为(x1
混合开发笔记4——使用v-touch插件的h5页面无法在ios上下滑动
Juliet_xmj的博客
08-28 608
vue+vue-touch及常见问题解决 vue-touch使用 Vue项目的移动端页面上加上左右滑动效果，安装插件vue-touch （1）安装 npm install vue-touch@next --save （2）main.js引入 import VueTouch from 'vue-touch' Vue.use(VueTouch, {name: 'v-touch'}) VueTouch.config.swipe = { threshold: 100, //手指左右滑动距离 }; （3）组件
【VUE 监听用户滑动】
前端-CV全粘工程师
08-10 3231
可以使用Vue的自定义指令来实现监听滑动方向与距离。});// 横向滑动// 右滑} else {// 左滑} else {// 纵向滑动// 下滑} else {// 上滑})})然后，在需要监听滑动事件的元素上使用v-swipe指令，并传入一个函数作为参数，该函数接收两个参数，分别为滑动方向和距离。console . log(` 滑动方向： ${ direction } ，滑动距离： ${ distance } `);
Vue 中 使用touchstart ，touchmove，touchend事件
m0_45043105的博客
11-22 4356
<template> <div id="SlideBar" class="box"> <div class="item" ref="slide" :style="slideStyle" @touchstart="start($event)" @touchmove="move($event)" @touchend="end($event)"&gt...
vue项目中@touchstart绑定的点击事件点击穿透的解决
weixin_43366084的博客
11-10 2489
在vue项目练习时，在一个详情页通过@touchstart绑定了一个点击返回按钮，通过history.back进行返回。 但是，bug出现了，点击事件似乎并不是只执行了一次，而是在返回之后的页面又一次的进行了点击，导致效果出现极大偏差。 原来代码是这样的： methods: { handleToBack () { history.back() } } 最终通过定时器给点击事件一个延迟： handleToBack () { setTimeout(() =&
vue2.0移动端触摸反馈指令
05-20
可以使用vue-touch库来实现移动端触摸反馈。首先需要安装vue-touch： ``` npm install vue-touch@next ``` 然后在main.js中引入并使用vue-touch： ```javascript import Vue from 'vue' import VueTouch from 'vue-touch' Vue.use(VueTouch, {name: 'v-touch'}) new Vue({ // ... }) ``` 接下来，在需要添加触摸反馈的元素上使用v-touch指令即可： ```html <template> <div v-touch @tap="handleTap">点击我</div> </template> <script> export default { methods: { handleTap() { console.log('tapped') } } } </script> ``` v-touch指令支持以下事件监听： - tap：点击 - swipe：滑动 - swipeleft：向左滑动 - swiperight：向右滑动 - swipeup：向上滑动 - swipedown：向下滑动 你可以在指令后面加上修饰符来更改触发事件的类型，例如： ```html <template> <div v-touch.swipeleft="handleSwipeLeft">向左滑动我</div> </template> <script> export default { methods: { handleSwipeLeft() { console.log('swiped left') } } } </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值