vue-touch上下滑动的问题

已于 2022-06-29 09:52:18 修改
阅读量1.3k 收藏 1
点赞数 1
分类专栏： 前端 vue.js css
于 2022-03-02 17:40:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zsq199771/article/details/123236048
版权

手势组件 移动端滑动 touch-action 移动端适配 CSS调整
关键词由CSDN通过智能技术生成
前端 同时被 3 个专栏收录
90 篇文章 0 订阅
订阅专栏
vue.js
49 篇文章 0 订阅
订阅专栏
css
19 篇文章 0 订阅
订阅专栏

首先 是一个手势组件
问题出在左右手势加好了以后，上下滑动的时候，window端是感觉不到的，超出部分正常滑动 但是移动端或者触摸大屏端不能拖拽滑动。
只需要在组件上加

class="v-touch"

然后css

.v-touch{
	touch-action: pan-y!important;
}

就OOOOO了

星陈~
关注
专栏目录
vue自定义移动端touch事件，点击、滑动、长按事件
09-30
vue自定义移动端touch事件，点击、滑动、长按事件.将以上代码保存到一个js文件内，引入到页面vue库文件之后、用户js文件之前。这样就可以使用vue的触屏事件了。
vue-touch-events:支持简单的触摸事件（点击滑动触摸保持）
04-28
提示触摸事件 启用vue.js 2.x的点击/滑动/触摸保持事件 特征： 常见的触摸事件，例如tap ， swipe ， touchhold （） 所有事件同时支持鼠标和触摸屏 ...import Vue2TouchEvents from 'vue2-touch-events' Vue . us
wordpress 缩略图_如何在WordPress中轻松显示带有缩略图的页面列表
09-04 868
wordpress 缩略图Most business websites primarily use pages for their content. Since pages are different than posts, you may need different ways to display them. In this article, we will show you how to e...
关于v-touch插件上下滑动事件
Brand_heeee的博客
03-09 637
一：安装 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...
vue上下滑动(仿高德)
m0_53912016的博客
09-06 1975
【代码】vue上下滑动(仿高德)
vue插件v-touch的坑（不能上下滑动）
ZHOU_Ivy3的博客
01-05 3546
一、用法 1.下载 2.在main.js中引入 3. 使用 二、vue-touch的坑 使用vue-touch监听左右滑动之后，不能进行上下滑动 ①原因： ②解决方法： 2.手机端测试时发现滑动不灵敏问题 ①原因： <v-touch></v-touch>标签被撑开的高度不...
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 和vue-touch 实现移动端左右导航效果（仿京东移动站导航）
11-27
在本文中，我们将探讨如何使用Vue.js和vue-touch库来实现移动端的左右导航效果，类似于京东移动站的导航。Vue.js是一个流行的JavaScript框架，适用于构建用户界面，而vue-touch则是Vue.js的一个插件，它提供了触摸...
vue3-touch-events:对vue.js 3的简单触摸事件支持
05-12
vue3-touch-events 在vue.js 3.x中的任何HTML DOM元素上启用点击，滑动，触摸，按住，鼠标按下，鼠标向上事件。 使交互式vue.js内容易于移动的最简单方法。 将v-touch事件添加到元素时，它会使用完全声明性的语法...
vue H5中使用kim-vue-touch监听上滑，点击下滑事件
liuxi_happy的博客
06-08 1779
移动端监听上滑下滑
vue 通讯录向上滑动事件
10-30
第一个是在通讯录右边的索引条上进行滑动，滑动到相应字母就跳转到相应字母的锚点上。
vue左右拖动上下滚动组件
02-15
这是一个vue,pc端上的局部上下滚动，左右拖动单元格元素组件
Vue实现table上下移动功能示例
10-17
主要介绍了Vue实现table上下移动功能,结合实例形式分析了vue.js针对table表格元素动态操作相关实现技巧,需要的朋友可以参考下
Vue实现点击箭头上下移动效果
12-28
<body> {{item.name}} //i↓</button> <button v-show=i>0 @click=up(i)>↑</button> <script sr
vue webapp滑动事件_移动端网页上下滑动的事件
weixin_36212135的博客
01-13 1208
前面写过1篇 jquery mobile.js的swipe事件，来实现开关按钮的效果。查看资料后发现，swipe事件左右事件，移动端的上下滑动事件并不是用swipe.网上搜索之后，发现移动端的原生事件touch可以解决这个问题。touch事件本文例子的要求是：上下滑动超过给定的像素，隐藏/显示页面的元素。开始是隐藏的状态。注意，touch事件并需要引入任何的js库。1元许愿.div1{width:...
vue2.0移动端滑动事件vue-touch
热门推荐
你蠢哭我咯的博客
12-08 5万+
https://github.com/vuejs/vue-touch/tree/next cnpm install vue-touch@nextvar VueTouch = require('vue-touch') Vue.use(VueTouch, {name: 'v-touch'})//左划 默认渲染为div data为参数 <v-touch v-on:swipeleft="onS
vue 自定义事件（移动端上下左右滑动长按）
weixin_43824144的博客
10-23 1748
新建一个js 文件 内容如下 /** * 处理 移动设备上的 点击、长按、左右上下滑动 事件 * * ========================================= * 导出了7个自定义指令： * v-tap： tap点击事件 * v-swipe： swipe滑动事件 * v-swipeleft： swipeleft左滑事件 * v-swiperight...
vue中移动端网页 自定义触屏事件，点击、滑动、左滑、右滑、下滑、上滑、长按事件
csl125的博客
01-18 9080
事件主要是监听touchstart、touchend与touchmove事件， 事件这样可以获取用户触屏结束后的位置， 这样就可以计算出用户在屏幕上滑动的方向 v-tap： tap点击事件 v-swipe： swipe滑动事件 v-swipeleft： swipeleft左滑事件 v-swiperight： swiperight右滑事件 v-swipedown： swipedown下...
vue中使用better-scroll 无法滚动的问题 详解
weixin_43346106的博客
04-11 1747
如下 我的遇到的问题是，有时候主页刚刚加载就直接就不能滚动，有时候滑动到中间，明明下面还有图片，就有滑不动了。在上拉加载更多时，图片是加载了，但是就是要等一下或者直接 不能向上滑动。 better-scroll 滚动原理 better-scroll它有两个div层，wrapper层 和 content层，wrapper 表示的是滑动区域，content表示的滚动内容，当content层的高度或宽度大于wrapper层的时候，就可以纵向滚动和横向滚动了（和游览器页面的滚动原理一样） 这里比我将的更清楚
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

星陈~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值