Vue实现移动端左右滑动效果的方法


Posted in Javascript onNovember 27, 2018

1. 最近得到一个新需求,需要在Vue项目的移动端页面上加上左右滑动效果,在网上查阅资料,最终锁定了vue-touch

2. 下载vue-touch (https://github.com/vuejs/vue-touch/tree/next) 注意:如果Vue是2.x 的版本的话,一定要下next分支上的。

3. 使用:

    3.1 npm install vue-touch@next --save

    3.2 在main.js 中 引入:

import VueTouch from 'vue-touch'
    Vue.use(VueTouch, {name: 'v-touch'})
    VueTouch.config.swipe = {
       threshold: 100 //手指左右滑动距离
    }

    3.3  在左右滑动页面的父页面使用,如:

<v-touch v-on:swipeleft="onSwipeLeft" v-on:swiperight="onSwipeRight" tag="div">
        <router-view></router-view>
    </v-touch>

        左滑事件:swipeleft, 右滑事件:swiperight, 更多事件请查阅api

4. 注意事项:

    使用左右滑动之后,发现不能上下滑动了,这是因为vue-touch 默认禁止了用户的手势操作,注意组件上有个css属性:touch-action: none;

    把这个属性覆盖一下就好了,如: touch-action: pan-y!important;

总结

以上所述是小编给大家介绍的Vue实现移动端左右滑动效果的方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
Javascript模板技术
Apr 27 Javascript
js优化针对IE6.0起作用(详细整理)
Dec 25 Javascript
JavaScript数值转换的三种方式总结
Jul 31 Javascript
JavaScript中自定义事件用法分析
Dec 23 Javascript
使用VS开发 Node.js指南
Jan 06 Javascript
JS函数的几种定义方式分析
Dec 17 Javascript
原生js和jquery分别实现横向导航菜单效果
May 13 Javascript
JavaScript实现复制文章自动添加版权
Aug 02 Javascript
新闻上下滚动jquery 超简洁(必看篇)
Jan 21 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
Oct 30 Javascript
JS+canvas五子棋人机对战实现步骤详解
Jun 04 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
Sep 04 Javascript
vue2.0移动端滑动事件vue-touch的实例代码
Nov 27 #Javascript
详解vuex 渐进式教程实例代码
Nov 27 #Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
Nov 27 #Javascript
Node+OCR实现图像文字识别功能
Nov 26 #Javascript
图片文字识别(OCR)插件Ocrad.js教程
Nov 26 #Javascript
JS 验证码功能的三种实现方式
Nov 26 #Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
Nov 26 #Javascript
You might like
过滤掉PHP数组中的重复值的实现代码
2011/07/17 PHP
PHP 将逗号、空格、回车分隔的字符串转换为数组的函数
2012/06/07 PHP
ThinkPHP水印功能实现修复PNG透明水印并增加JPEG图片质量可调整
2014/11/05 PHP
php的GD库imagettftext函数解决中文乱码问题
2015/01/24 PHP
一个无限级XML绑定跨框架菜单(For IE)
2007/01/27 Javascript
JavaScript DOM 添加事件
2009/02/14 Javascript
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
2011/03/01 Javascript
javascript两种function的定义介绍及区别说明
2013/05/02 Javascript
关于JS数组追加数组采用push.apply的问题
2014/06/09 Javascript
javascript实现playfair和hill密码算法
2014/12/07 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
2016/07/04 Javascript
jquery  实现轮播图详解及实例代码
2016/10/12 Javascript
AngularJS ng-template寄宿方式用法分析
2016/11/07 Javascript
BootStrap Table 获取同行不同列元素的方法
2016/12/19 Javascript
vue组件Prop传递数据的实现示例
2017/08/17 Javascript
关于axios不能使用Vue.use()浅析
2018/01/12 Javascript
Vue中div contenteditable 的光标定位方法
2018/08/25 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
2018/10/10 jQuery
js中Array对象的常用遍历方法详解
2019/01/17 Javascript
vue-router两种模式区别及使用注意事项详解
2019/08/01 Javascript
微信小程序 可搜索的地址选择实现详解
2019/08/28 Javascript
python 装饰器功能以及函数参数使用介绍
2012/01/27 Python
python3 requests中使用ip代理池随机生成ip的实例
2018/05/07 Python
Python中使用logging和traceback模块记录日志和跟踪异常
2019/04/09 Python
关于Python核心框架tornado的异步协程的2种方法详解
2019/08/28 Python
opencv+python实现鼠标点击图像,输出该点的RGB和HSV值
2020/06/02 Python
Giglio俄罗斯奢侈品购物网:男士、女士、儿童高级时装
2018/07/27 全球购物
《花木兰》教学反思
2014/04/09 职场文书
教师一岗双责责任书
2014/04/16 职场文书
环保建议书600字
2014/05/14 职场文书
基层党支部公开承诺书
2014/05/29 职场文书
个人整改措施书面材料
2014/10/24 职场文书
2014年党支部书记工作总结
2014/12/04 职场文书
教师党员承诺书2015
2015/01/21 职场文书
小学教代会开幕词
2016/03/04 职场文书
Golang并发操作中常见的读写锁详析
2021/08/30 Golang