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 15 Javascript
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
Oct 29 Javascript
extjs中form与grid交互数据(record)的方法
Aug 29 Javascript
js获取触发事件元素在整个网页中的绝对坐标(示例代码)
Dec 13 Javascript
介绍JavaScript的一个微型模版
Jun 24 Javascript
jquery获得当前html页面源码的方法
Jul 14 Javascript
Javascript显示和隐藏ul列表的方法
Jul 15 Javascript
AngularJS中的API(接口)简单实现
Jul 28 Javascript
原生js实现手风琴功能(支持横纵向调用)
Jan 13 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
May 10 Javascript
ES6中Array.includes()函数的用法
Sep 20 Javascript
手机注册发送验证码倒计时的简单实例
Nov 15 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 闭包特性在实际应用中的问题
2009/10/30 PHP
php网站来路获取代码(针对搜索引擎)
2010/06/08 PHP
header与缓冲区之间的深层次分析
2016/07/30 PHP
jqgrid 简单学习笔记
2011/05/03 Javascript
网页广告中JS代码的信息监听示例
2014/04/02 Javascript
JS网页在线获取鼠标坐标值的方法
2015/02/28 Javascript
jQuery实现两个select控件的互移操作
2016/12/22 Javascript
基于jQuery使用Ajax动态执行模糊查询功能
2018/07/05 jQuery
如何将HTML字符转换为DOM节点并动态添加到文档中详解
2018/08/19 Javascript
VUE 自定义组件模板的方法详解
2019/08/30 Javascript
vue3修改link标签默认icon无效问题详解
2019/10/09 Javascript
layui写后台表格思路和赋值用法详解
2019/11/14 Javascript
vue结合el-upload实现腾讯云视频上传功能
2020/07/01 Javascript
[16:14]教你分分钟做大人:米拉娜(HEROS)
2014/11/24 DOTA
[01:00:44]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第三局
2016/03/04 DOTA
python简单程序读取串口信息的方法
2015/03/13 Python
python根据出生年份简单计算生肖的方法
2015/03/27 Python
Python SqlAlchemy动态添加数据表字段实例解析
2018/02/07 Python
对Python 3.5拼接列表的新语法详解
2018/11/08 Python
python3编写ThinkPHP命令执行Getshell的方法
2019/02/26 Python
用python给自己做一款小说阅读器过程详解
2019/07/11 Python
tensorflow查看ckpt各节点名称实例
2020/01/21 Python
Python面向对象程序设计之私有变量,私有方法原理与用法分析
2020/03/23 Python
Python grequests模块使用场景及代码实例
2020/08/10 Python
浅谈HTML5 FileReader分布读取文件以及其方法简介
2017/11/09 HTML / CSS
html5 http的轮询和Websocket原理
2018/10/19 HTML / CSS
LN-CC日本:高端男装和女装的奢侈时尚目的地
2019/09/01 全球购物
绿色家庭事迹材料
2014/05/01 职场文书
做一个有道德的人演讲稿
2014/05/14 职场文书
七夕情人节促销方案
2014/06/07 职场文书
小学生运动会通讯稿
2014/09/23 职场文书
教育实习指导教师评语
2014/12/31 职场文书
北京天坛导游词
2015/02/12 职场文书
2019年新郎保证书3篇
2019/10/17 职场文书
python爬取某网站原图作为壁纸
2021/06/02 Python
JavaScript小技巧带你提升你的代码技能
2021/09/15 Javascript