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 相关文章推荐
jQuery库与其他JS库冲突的解决办法
Feb 07 Javascript
javascript 当前日期转化为中文的实现代码
May 13 Javascript
setTimeout的延时为0时多个浏览器的区别
May 23 Javascript
jQuery插件实现无缝滚动特效
Nov 24 Javascript
jQuery日程管理控件glDatePicker用法详解
Mar 29 jQuery
浅谈JsonObject中的key-value数据解析排序问题
Dec 06 Javascript
vue-router中的hash和history两种模式的区别
Jul 17 Javascript
vue实现点击选中,其他的不选中方法
Sep 05 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
Sep 07 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
May 10 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
Jan 16 Javascript
js根据后缀判断文件文件类型的代码
May 09 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编码规范之注释和文件结构说明
2010/07/09 PHP
PHP Parse Error: syntax error, unexpected $end 错误的解决办法
2012/06/05 PHP
浅谈discuz密码加密的方式
2014/05/22 PHP
Javascript面向对象编程(三) 非构造函数的继承
2011/08/28 Javascript
Javascript实现单例模式
2016/01/24 Javascript
javascript基本数据类型和转换
2017/03/17 Javascript
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
2017/04/20 jQuery
ReactNative踩坑之配置调试端口的解决方法
2017/07/28 Javascript
jquery.uploadView 实现图片预览上传功能
2017/08/10 jQuery
30分钟快速入门掌握ES6/ES2015的核心内容(下)
2018/04/18 Javascript
vue打包的时候自动将px转成rem的操作方法
2018/06/20 Javascript
vue解决一个方法同时发送多个请求的问题
2018/09/25 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
2019/04/11 Javascript
vue实现PC端录音功能的实例代码
2019/06/05 Javascript
python中函数默认值使用注意点详解
2016/06/01 Python
Django实现简单分页功能的方法详解
2017/12/05 Python
Python实现将数据框数据写入mongodb及mysql数据库的方法
2018/04/02 Python
Python引用计数操作示例
2018/08/23 Python
python复制列表时[:]和[::]之间有什么区别
2018/10/16 Python
Python在Matplotlib图中显示中文字体的操作方法
2019/07/29 Python
wxPython窗体拆分布局基础组件
2019/11/19 Python
wxpython多线程防假死与线程间传递消息实例详解
2019/12/13 Python
Python如何将模块打包并发布
2020/08/30 Python
分布式全文检索引擎ElasticSearch原理及使用实例
2020/11/14 Python
Selenium+BeautifulSoup+json获取Script标签内的json数据
2020/12/07 Python
美国网上订购鲜花:FTD
2016/09/23 全球购物
新西兰领先的鞋类和靴子网上商城:Merchant 1948
2017/09/08 全球购物
100%有机精油,美容油:House of Pure Essence
2018/10/30 全球购物
美国第二大连锁药店:Rite Aid
2019/04/03 全球购物
个人自我鉴定
2013/11/07 职场文书
自动化专业大学生职业生涯规划范文:爱拚才会赢
2014/09/12 职场文书
先进班组事迹材料
2014/12/25 职场文书
银行给客户的感谢信
2015/01/23 职场文书
校园开放日新闻稿
2015/07/17 职场文书
浅谈Python数学建模之数据导入
2021/06/23 Python
SQL中的三种去重方法小结
2021/11/01 SQL Server