vue2.0移动端滑动事件vue-touch的实例代码


Posted in Javascript onNovember 27, 2018

Vue-touch的使用

有时候我们不止需要有返回键,也要有手势滑动切换页面的功能时,这个时候vue-touch就派上用场了

API地址:

https://github.com/vuejs/vue-touch/tree/next

安装

npm insall vue-touch@next --save
//main.js中引入:
import VueTouch from 'vue-touch'
Vue.use(VueTouch, {name: 'v-touch'})

用法如下:

//html代码
<template>
 <v-touch v-on:swipeleft="swiperleft" v-on:swiperight="swiperright" class="wrapper">
   <div class="menu-container" ref="menuContainer">  
  <!-- 这个是内容 --> 
   </div>
 </v-touch>
</template>

export default {
 name: 'Queue',
 data () {
  return {
  }
 },
 methods: {
  swiperleft: function () {
   this.$router.push({'path':'/queuehistory'});
  },
  swiperright: function () {
   this.$router.push({'path':'/home'});
  }
 }
}

下面给大家介绍下vue2.0移动端滑动事件vue-touch,具体内容如下所述:

https://github.com/vuejs/vue-touch/tree/next

cnpm install vue-touch@next

var VueTouch = require('vue-touch')
Vue.use(VueTouch, {name: 'v-touch'})

//左划   默认渲染为div  data为参数
<v-touch v-on:swipeleft="onSwipeLeft(data)">Swipe me!</v-touch>
//点击  渲染为一个a标签
<v-touch tag="a" v-on:tap="onTap">Tap me!</v-touch>
//点击  渲染为p标签
<v-touch tag="p" v-on:tap="onTap">Tap me!</v-touch>

总结

以上所述是小编给大家介绍的vue2.0移动端滑动事件vue-touch的实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
javascript 节点遍历函数
Mar 28 Javascript
javascript 获取图片尺寸及放大图片
Sep 04 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
Apr 03 Javascript
javascript省市级联功能实现方法实例详解
Oct 20 Javascript
JavaScript检查子字符串是否在字符串中的方法
Feb 03 Javascript
关于原生js中bind函数的简单实现
Aug 10 Javascript
基于jQuery实现中英文切换导航条效果
Sep 18 Javascript
jQuery.uploadify文件上传组件实例讲解
Sep 23 Javascript
webpack实现热加载自动刷新的方法
Jul 30 Javascript
vue中父子组件注意事项,传值及slot应用技巧
May 09 Javascript
vue实现城市列表选择功能
Jul 16 Javascript
JQuery绑定事件四种实现方法解析
Dec 02 jQuery
详解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
tracking.js页面人脸识别插件使用方法
Apr 16 #Javascript
You might like
如何对PHP程序中的常见漏洞进行攻击
2006/10/09 PHP
PHP MemCached 高级缓存应用代码
2010/08/05 PHP
PHP中设置时区,记录日志文件的实现代码
2013/01/07 PHP
解析如何屏蔽php中的phpinfo()函数
2013/06/06 PHP
Function eregi is deprecated (解决方法)
2013/06/21 PHP
PHP调用C#开发的dll类库方法
2014/07/28 PHP
php 无限级分类 获取顶级分类ID
2016/03/13 PHP
详解PHP版本兼容之openssl调用参数
2018/07/25 PHP
php 中self,this的区别和操作方法实例分析
2019/11/04 PHP
PHP的重载使用魔术方法代码实例详解
2021/02/26 PHP
ExtJs grid行 右键菜单的两种方法
2010/06/19 Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
2013/06/25 Javascript
JS定义回车事件(实现代码)
2013/07/08 Javascript
jquery 添加节点的几种方法介绍
2013/09/04 Javascript
javascript从image转换为base64位编码的String
2014/07/29 Javascript
三个js循环的关键字示例(for与while)
2016/02/16 Javascript
JS刷新父窗口的几种方式小结(推荐)
2016/11/09 Javascript
基于AngularJS的拖拽文件上传的实例代码
2017/07/15 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
2019/09/11 Javascript
wxPython窗口的继承机制实例分析
2014/09/28 Python
举例讲解Python中装饰器的用法
2015/04/27 Python
Python3写入文件常用方法实例分析
2015/05/22 Python
pandas系列之DataFrame 行列数据筛选实例
2018/04/12 Python
python图形工具turtle绘制国际象棋棋盘
2019/05/23 Python
Python列表与元组的异同详解
2019/07/02 Python
python实现发送form-data数据的方法详解
2019/09/27 Python
使用python绘制cdf的多种实现方法
2020/02/25 Python
Python实现转换图片背景颜色代码
2020/04/30 Python
美国唇部护理专家:Sara Happ
2019/06/19 全球购物
碧欧泉法国官网:Biotherm法国
2019/10/23 全球购物
基于Python 函数和方法的区别说明
2021/03/24 Python
个人社会实践自我鉴定
2014/03/24 职场文书
庆祝国庆节演讲稿2014
2014/09/19 职场文书
基督教追悼会答谢词
2015/09/29 职场文书
详解如何用Python实现感知器算法
2021/06/18 Python
Python 中 Shutil 模块详情
2021/11/11 Python