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高级程序设计 扩展--关于动态原型
Nov 09 Javascript
JS实现当前页居中分页效果的方法
Jun 18 Javascript
jquery实现的缩略图预览滑块实例
Jun 25 Javascript
跟我学习javascript的浮点数精度
Nov 16 Javascript
Bootstrap基本组件学习笔记之分页(12)
Dec 08 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
May 26 Javascript
React中使用collections时key的重要性详解
Aug 07 Javascript
利用nginx + node在阿里云部署https的步骤详解
Dec 19 Javascript
使用 vue.js 构建大型单页应用
Feb 10 Javascript
一百行JS代码实现一个校验工具
Apr 30 Javascript
javascript 设计模式之组合模式原理与应用详解
Apr 08 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
Apr 27 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项目打包方法
2008/02/18 PHP
PHP parse_url 一个好用的函数
2009/10/03 PHP
PHP实现获取图片颜色值的方法
2014/07/11 PHP
MacOS下PHP7.1升级到PHP7.4.15的方法
2021/02/22 PHP
JS版网站风格切换实例代码
2008/10/06 Javascript
如何阻止复制剪切和粘贴事件为了表单内容的安全
2013/05/23 Javascript
Bootstrap每天必学之标签页(Tab)插件
2020/08/09 Javascript
js 获取当前web应用的上下文路径实现方法
2016/08/19 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
2016/09/30 Javascript
javascript匀速动画和缓冲动画详解
2016/10/20 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
2017/01/08 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
2017/06/12 Javascript
解析vue data不可以使用箭头函数问题
2018/07/03 Javascript
微信小程序http连接访问解决方案的示例
2018/11/05 Javascript
基于JS实现web端录音与播放功能
2019/04/17 Javascript
vue 实现Web端的定位功能 获取经纬度
2019/08/08 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
2019/09/02 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
2019/09/06 Javascript
JS实现滚动条触底加载更多
2019/09/19 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
2019/09/26 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
2019/11/06 Javascript
探索node之事件循环的实现
2020/10/30 Javascript
在Python中使用base64模块处理字符编码的教程
2015/04/28 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
使用pytorch和torchtext进行文本分类的实例
2020/01/08 Python
Python环境配置实现pip加速过程解析
2020/11/27 Python
Sneaker Studio法国:购买运动鞋
2018/06/08 全球购物
汽车专业学生自我评价
2014/01/19 职场文书
学生拾金不昧表扬信
2014/01/21 职场文书
工程管理英文求职信
2014/03/18 职场文书
房屋租赁意向书
2014/04/01 职场文书
2014年母亲节寄语
2014/05/07 职场文书
大学生职业生涯十年规划书范文
2014/09/17 职场文书
员工保密协议范本,您一定得收藏!很有用!
2019/08/08 职场文书
python Django框架快速入门教程(后台管理)
2021/07/21 Python
ajax请求前端跨域问题原因及解决方案
2021/10/16 Javascript