Vue移动端左滑右滑

使用的组件地址:https://github.com/vuejs/vue-touch/tree/next

注:vue2.0以上

1、安装

npm install [email protected] --save

2、main.js中引入

import VueTouch from ‘vue-touch‘

Vue.use(VueTouch, {name: ‘v-touch‘});

3、在使用的页面中

  <v-touch
    @swipeleft = "swipeLeft"
    @swiperight = "swipeRight"
    :swipe-options="{direction: ‘horizontal‘}"
  >
  </v-touch>
methods:{    // 左滑
    swipeLeft(){
        // 页面跳转或其它操作
    },
    // 右滑
    swipeRight(){
        // 页面跳转或其它操作
    },}

注:

:swipe-options="{direction: ‘horizontal‘}"  可以解决引入该组件后不许上下滑动问题

原文地址:https://www.cnblogs.com/knightdreams6/p/11969542.html

时间: 2024-10-29 03:52:56

Vue移动端左滑右滑的相关文章

前端福利——左滑右滑,绝对是你见过的最简单的写法

上个月使用bootstrap和seajs搭建了前端通用框架,就是为了使代码分块话,js和css直接通过配置就可调用,这样既方便了以后的开发,又方便了效率! 先看下框架图形吧 example就是手机端经常用到的示例 今天就是把我写的左滑右滑分享给大家,先看下图例吧 index.html代码 引用三个js jquery.js swiperhand.js index.js <div id="pagenos"> <span class="myspan" i

Android SwipeToDismiss:左滑/右滑删除ListView条目Item

?? <Android SwipeToDismiss:左右滑动删除ListView条目Item> Android的SwipeToDismiss是github上一个第三方开源框架(github上的项目链接地址:https://github.com/romannurik/Android-SwipeToDismiss ).该开源项目旨在:使得一个ListView的item在用户的手指在屏幕上左滑或者右滑时候,删除当前的这个ListView Item. 此种特效在新版的Android中应用不少.比方在

IOS开发—视图控制器左边缘右滑pop出栈

IOS视图控制器左边缘右滑pop出栈 IOS7.0之后,苹果优化了一个小功能,就是对于UINavagationController堆栈里的UIViewController,只要轻轻在视图控制器的左边缘右滑一下,该视图控制器就会pop出栈(前提当然是对于非根视图控制器而言).实现方法很简单,一句话搞定: self.navigationController.interactivePopGestureRecognizer.enabled = YES; 事实上对于一个视图控制器而言,该属性的默认值即为Y

ViewPager 滑动一半的判断方法以及左滑右滑判断

做项目的时候,会碰到用viewpager + fragments去实现多页滑动.有些时候需要完成:界面在滑动到一半或是一半以上的时候,需要把title之类的切换到下一个页面.这个时候仅仅依赖Viewpager的接口是不能判断,这里提供一个方法:判断viewpager是左滑还是右滑,同时对滑过一半的时候(这个参数可以调),进行相关操作. //定义两个变量,这个两个变量是表示滑动时候,positionOffset 是从大到 //小的变化,还是从小到大的变化.用于在滑动时候,避免多次调用一个方法 pr

移动端h5禁用浏览器左滑右滑的前进后退功能

在项目运行过程中发现,用户在有左右滑动前进后退的功能的浏览器上签字时,偶然触发了前进后退会导致canvas像是重置了一样内容消失,所以需要在代码中处理这种情况. 基本原理就是在touchmove事件中阻止默认事件,使浏览器不会触发前进后退事件,但是也会无法触发scroll事件让页面正常滚动,后续如何让页面能正常滚动就会有多种思路. 参考https://www.cnblogs.com/Miracle-ZLZ/p/7852421.html文中第5点推荐使用IScroll,但看了一下github发现太

小程序 手机左滑右滑事件监听

<view class="touch" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" ></view> // 触摸开始事件 touchStart: function (e) { touchDot = e.touches[0].pageX; // 获取触摸时的原点 // 使用js计时器记录时间 i

App开发流程之右滑返回手势功能

iOS7以后,导航控制器,自带了从屏幕左边缘右滑返回的手势功能. 但是,如果自定义了导航栏返回按钮,这项功能就失效了,需要自行实现.又如果需要修改手势触发范围,还是需要自行实现. 广泛应用的一种实现方案是,采用私有变量和Api,完成手势交互和返回功能,自定义手势触发条件和额外功能. 另一种实现方案是,采用UINavigationController的代理方法实现交互和动画: - (nullable id <UIViewControllerInteractiveTransitioning>)na

viewpager 滑至最后一屏禁止向右滑,滑至第一屏禁止向左滑,怎么实现

============问题描述============ 如题 viewpager 滑至最后一屏禁止向右滑,滑至第一屏禁止向左滑,怎么实现 ============解决方案1============ 谢谢楼主分享,我学习了

JS获取鼠标左(右)滑事件

鼠标左(右)滑也是网站开发中常见的效果之一,这里对鼠标左(右)滑做出一些解释. 首先要获取需要左右滑事件的节点: eg: var div=document.getElementById("div"); 然后获取点击事件onmousedown并传参: eg: div.onmousedown=function(e){ } 在函数里写一个闭包来判断左右滑,这里需要获取鼠标的坐标,之后进行判断输出结果 eg: div.onmousedown=function(e){ var a1=e.scre