Vue 自定义移动端的 滑动事件

最新推荐文章于 2024-06-27 14:56:52 发布
最新推荐文章于 2024-06-27 14:56:52 发布
阅读量1.9k 收藏 3
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43967603/article/details/105225461
版权
本文介绍了如何在Vue中自定义移动端的滑动事件。通过创建一个js文件并将其引入到Vue库之后，用户js文件之前，可以利用Vue实现触屏滑动事件。文中以下滑事件为例进行了详细说明。
摘要由CSDN通过智能技术生成

核心代码

function vueTouch(el,binding,type){
   //触屏函数
    var _this=this;
    this.obj=el;
    this.binding=binding;
    this.touchType=type;
    this.vueTouches={
   x:0,y:0};//触屏坐标
    this.vueMoves=true;
    this.vueLeave=true;
    this.vueCallBack=typeof(binding.value)=="object"?binding.value.fn:binding.value;
    this.obj.addEventListener("touchstart",function(e){
   
        _this.start(e);
    },false);
    this.obj.addEventListener("touchend",function(e){
   
        _this.end(e);
    },false);
    this.obj.addEventListener("touchmove",function(e){
   
        _this.move(e);
    },false);
};
vueTouch.prototype={
   
    start:function(e){
   //监听touchstart事件
        this.vueMoves=true;
        this.vueLeave=true;
        this.longTouch=true
最低0.47元/天 解锁文章
LeungZhenPang
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue自定义移动端touch事件，点击、滑动、长按事件
金大光
09-27 8万+
vue移动的自定义touch事件，包括点击，滑动，左滑，右滑，上滑，下滑，长按
vue2.0移动端滑动事件vue-touch的实例代码
10-17
主要介绍了vue2.0移动端滑动事件vue-touch的实例代码,需要的朋友可以参考下
在vue web移动端中使用滑动事件
徐忠炜的博客
06-22 9706
滑动事件 touchstart 手指开始滑动的位置 touchmove 手指滑动的位置 touchend 手指离开的位置 监听滑动事件 <div @touchstart='touchstart' @touchmove='touchmove'> </div> touchstart (e) { // 如果你要阻止点击事件，请反注释下一行代码 // e.preventDefault() this.startX = e.touches[0].clientX
Vue3触摸屏滑动事件（touch, swipe）使用注意事项
最新发布
qiuzen的博客
06-27 531
使用方法如下，有些特殊的情况下需要加一个disable_touch的开关来阻止swipe和press事件的发生。安装npm包：npm i vue3-touch-events。
vue自定义指令touch事件之滑动、长按事件
fanlinld的专栏
05-24 1734
【代码】vue自定义指令touch事件之滑动、长按事件。
Vue项目监听touch事件实现移动端滑动
qq_38958099的博客
09-24 1292
由于该页面实际使用场景在移动端触摸屏，电脑端监听鼠标事件（mouseout、mouseup等）或者拖动事件（dragstart、dragend等）实现的方式在触摸屏上不可用，需要监听touch相关事件（touchstart、touchend）touchstart事件的入参是TouchEvent对象，该对象包含多个参数，其中touchstart事件的触点信息位于TouchEvent对象下的touches数组中，获取touchstart事件发生时触点在Y轴方向位置信息的代码如下。首先在元素上绑定事件监听函数。
vue中移动端网页 自定义触屏事件，点击、滑动、左滑、右滑、下滑、上滑、长按事件
csl125的博客
01-18 9040
事件主要是监听touchstart、touchend与touchmove事件， 事件这样可以获取用户触屏结束后的位置， 这样就可以计算出用户在屏幕上滑动的方向 v-tap： tap点击事件 v-swipe： swipe滑动事件 v-swipeleft： swipeleft左滑事件 v-swiperight： swiperight右滑事件 v-swipedown： swipedown下...
vue自定义移动端touch事件之点击、滑动、长按事件
08-27
Vue自定义移动端Touch事件之点击、滑动、长按事件 在移动端开发中，Touch事件是非常重要的一部分，我们经常需要监听用户的触摸操作，如点击、滑动、长按等。Vue框架提供了多种方式来处理Touch事件，但是在实际开发...
Vue实现移动端左右滑动效果的方法
12-12
例如，你可以设置`swipe`的`threshold`属性来决定触发滑动事件所需的最小滑动距离： ```javascript VueTouch.config.swipe = { threshold: 100 // 手指左右滑动至少需要100像素的距离 } ``` 然后，在需要监听滑动...
Vue/JS自定义指令：实现元素滑动、移动端适配以及边界处理
开源世界
09-13 789
元素滑动需要依赖于鼠标的移动，鼠标的移动位置决定了元素滑动的位置，元素的位置是通过调整左上顶点坐标来的，所以我们要知道元素滑动后的左上顶点坐标，这样才能将元素移动到指定位置..
Vue移动端触滑事件
qq_38948398的博客
08-31 2074
import Vue from 'vue' /* 声明构造函数 */ function vueTouch(el, binding, type) {//触屏函数 var _ = this; _.obj = el; _.binding = binding; _.touchType = type; _.vueTouches = { x: 0, y: 0 };//...
【VUE 监听用户滑动】
前端-CV全粘工程师
08-10 3478
可以使用Vue的自定义指令来实现监听滑动方向与距离。});// 横向滑动// 右滑} else {// 左滑} else {// 纵向滑动// 下滑} else {// 上滑})})然后，在需要监听滑动事件的元素上使用v-swipe指令，并传入一个函数作为参数，该函数接收两个参数，分别为滑动方向和距离。console . log(` 滑动方向： ${ direction } ，滑动距离： ${ distance } `);
vue实现滚动触发
朱远辉的博客
05-15 2488
vue实现滚动触发：在上述示例代码中，如果监听到滚动事件后，先将 scrollTop 变量更新为当前的滚动位置，然后利用防抖函数来实现滚动结束时再执行回调函数的效果。需要注意的是，在开发和调试过程中，要小心处理滚动事件的频率和效率问题，避免在大量滚动时导致页面卡顿或出现其他不必要的问题。在 Vue 中，可以通过监听滚动事件来实现滚动触发的效果。在需要监听滚动事件的元素中添加一个 scroll 事件的监听器。在对应的组件中定义 handleScroll() 方法。
Vue中实现Web端鼠标横向滑动和触控板滑动效果
pleaseprintf的博客
08-06 2886
在Web端，我们经常需要实现鼠标横向滑动和触控板滑动的效果，以便在页面中展示横向滑动的内容。本文将介绍如何使用Vue和JavaScript来实现这两种效果，并提供丰富的代码示例，帮助你轻松实现鼠标横向滑动和触控板滑动效果。通过本文，你已经了解了如何使用Vue和JavaScript在Web端实现鼠标横向滑动和触控板滑动效果。在实际项目中，你可以根据需求定制滑动速度和样式，以及添加更多交互效果。希望本文对你在Web端滑动效果的实现有所帮助。如果你有任何问题或疑问，欢迎留言讨论。需要系统源码或者BiShe加V。
Vue实现自动横向滚动，简单易上手
热门推荐
Junyaxx的博客
09-28 1万+
话不多说，先看demo 在写这篇文章之前我也不想造轮子，用别人的组件不香吗？可是百度搜索的仅仅只有better-scroll这个组件的介绍还比较详细，其他的基本都对新手不够友好。但是，就这个组件我引入时候就报错了，哎 这可不是我说的，也没有找到好的解决办法，想来想去还不如自己手写一个快，源码见下，直接CV即可 <template> <div> <!-- 定义一个滚动范围的父div 并绑定ref=all（方便下方方法中取得此元素...
vue监听滚动事件滚动加载
weixin_42333548的博客
03-14 1万+
监听元素内部滚动条事件，滚动到底部加载数据，也可以使用插件进行滚动加载处理 方法一、监听滚动条事件滚动加载 1、dom结构：最外层dom <div class="scrollWrap"> </div> 2、mounted:初始化监听 //mounted监听处理 this.$nextTick (() => { if (document.qu...
基于vue封装移动触摸滑动组件——简易的swiper
huihui_999的博客
03-08 2295
移动端的滑动组件
vue移动端组件横向滑动
09-12
你可以使用 Vue.js 结合一些移动端滑动组件库来实现横向滑动功能。以下是一个基本的示例： 1. 首先，安装所需的组件库。你可以使用 npm 或 yarn 来安装，比如安装 `better-scroll`： ``` npm install better-scroll --save ``` 2. 在你的 Vue 组件中，引入 `better-scroll`： ```javascript import BScroll from 'better-scroll' ``` 3. 在组件的 `mounted` 钩子中初始化 `better-scroll`，并设置横向滚动的配置项： ```javascript mounted() { this.scroll = new BScroll(this.$refs.wrapper, { scrollX: true, scrollY: false, click: true // 其他配置项... }) } ``` 4. 在 HTML 模板中设置滑动容器和滑动内容： ```html <template> <div class="scroll-container" ref="wrapper"> <div class="scroll-content"> <!-- 横向滑动的内容 --> </div> </div> </template> ``` 5. 在 CSS 样式中设置容器和内容的宽度，并添加样式以实现滑动效果： ```css .scroll-container { width: 100%; overflow: hidden; } .scroll-content { display: flex; width: fit-content; } /* 可根据需求自定义样式 */ ``` 现在，你就可以在移动端的 Vue 组件中实现横向滑动了。记得根据你的实际需求和组件库的文档进行配置和样式的调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值