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 相关文章推荐
HTML-CSS群中单选引发的“事件”
Mar 05 Javascript
IE autocomplete internet explorer's autocomplete
Jun 30 Javascript
JavaScript QueryString解析类代码
Jan 17 Javascript
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
Mar 17 Javascript
AngularJS 路由详解和简单实例
Jul 28 Javascript
jQuery实现页面点击后退弹出提示框的方法
Aug 24 Javascript
AngularJs Dependency Injection(DI,依赖注入)
Sep 02 Javascript
js防阻塞加载的实现方法
Sep 09 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
Dec 26 Javascript
vue组件之间通信实例总结(点赞功能)
Dec 05 Javascript
微信小程序实现富文本图片宽度自适应的方法
Jan 20 Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
Sep 21 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实现与ASP Banner组件相似的类
2006/10/09 PHP
PHP中HTTP方式下的Gzip压缩传输方法举偶
2007/02/15 PHP
Microsoft Ajax Minifier 压缩javascript的方法
2010/03/05 Javascript
JS编程小常识很有用
2012/11/26 Javascript
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
2013/03/01 Javascript
js 距离某一时间点时间是多少实现代码
2013/10/14 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
2014/05/02 Javascript
IE及IE6浏览器中判断JS文件加载成功失败的方法
2015/02/18 Javascript
jQuery实现冻结表格行和列
2015/04/29 Javascript
jquery对所有input type=text的控件赋值实现方法
2016/12/02 Javascript
利用JS轻松实现获取表单数据
2016/12/06 Javascript
JS 60秒后重新发送验证码的实例讲解
2017/07/26 Javascript
JavaScript实现换肤功能
2017/09/15 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
2017/10/26 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
2018/12/10 Javascript
ES6 Object方法扩展的应用实例分析
2019/06/25 Javascript
使用js实现单链解决前端队列问题的方法
2020/02/03 Javascript
微信小程序 获取手机号 JavaScript解密示例代码详解
2020/05/14 Javascript
vue实现的多页面项目如何优化打包的步骤详解
2020/07/19 Javascript
[47:22]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python中的super()方法使用简介
2015/08/14 Python
深入理解Python中变量赋值的问题
2017/01/12 Python
pytorch 把MNIST数据集转换成图片和txt的方法
2018/05/20 Python
在python里协程使用同步锁Lock的实例
2019/02/19 Python
基于Python实现人脸自动戴口罩系统
2020/02/06 Python
python matplotlib包图像配色方案分享
2020/03/14 Python
通信工程毕业生求职信
2013/11/16 职场文书
建筑总经理岗位职责
2014/02/02 职场文书
物流专员岗位职责
2014/02/17 职场文书
校庆接待方案
2014/03/18 职场文书
ktv好的活动方案
2014/08/17 职场文书
2014年党务工作总结
2014/11/25 职场文书
2014年应急工作总结
2014/12/11 职场文书
重阳节活动主持词
2015/07/04 职场文书
2016年优秀共青团员事迹材料
2016/02/25 职场文书
vue如何在data中引入图片的正确路径
2022/06/05 Vue.js