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 相关文章推荐
CSS+JS构建的图片查看器
Jul 22 Javascript
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
Nov 28 Javascript
Firefox中使用outerHTML的2种解决方法
Jun 07 Javascript
jquery.ajax之beforeSend方法使用介绍
Dec 08 Javascript
js跨域请求数据的3种常用的方法
Dec 01 Javascript
Js类的静态方法与实例方法区分及jQuery拓展的两种方法
Jun 03 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
Oct 10 Javascript
利用vue-router实现二级菜单内容转换
Nov 30 Javascript
js运算符的一些特殊用法
Jul 29 Javascript
JS实现网站吸顶条
Jan 08 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
Mar 07 Javascript
JavaScript实现班级抽签小程序
May 19 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
tracking.js页面人脸识别插件使用方法
Apr 16 #Javascript
You might like
php 随机生成10位字符代码
2009/03/26 PHP
PHP使用ffmpeg给视频增加字幕显示的方法
2015/03/12 PHP
Yii2框架使用计划任务的方法
2016/05/25 PHP
javascript Firefox与IE 替换节点的方法
2010/02/24 Javascript
javascript与CSS复习(二)
2010/06/29 Javascript
入门基础学习 ExtJS笔记(一)
2010/11/11 Javascript
js window.onload 加载多个函数和追加函数详解
2014/01/08 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
2014/01/28 Javascript
用Jquery实现滚动新闻
2014/02/12 Javascript
JavaScript实现鼠标点击后层展开效果的方法
2015/05/13 Javascript
react-router4 嵌套路由的使用方法
2017/07/24 Javascript
js通过Date对象实现倒计时动画效果
2017/10/27 Javascript
微信小程序实现文字跑马灯效果
2020/05/26 Javascript
浅谈AngularJS中$http服务的简单用法
2018/05/15 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
2019/11/09 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
2020/02/15 Javascript
浅谈TypeScript的类型保护机制
2020/02/23 Javascript
详解vue中v-model和v-bind绑定数据的异同
2020/08/10 Javascript
vue实现简单加法计算器
2020/10/22 Javascript
Python函数中*args和**kwargs来传递变长参数的用法
2016/01/26 Python
玩转python爬虫之爬取糗事百科段子
2016/02/17 Python
python将每个单词按空格分开并保存到文件中
2018/03/19 Python
Python 打印中文字符的三种方法
2018/08/14 Python
Python为何不能用可变对象作为默认参数的值
2019/07/01 Python
Python模块 _winreg操作注册表
2020/02/05 Python
Python守护进程实现过程详解
2020/02/10 Python
python画图常规设置方式
2020/03/05 Python
python 一维二维插值实例
2020/04/22 Python
怎样写留学自荐信
2013/11/11 职场文书
仓管员岗位责任制
2014/02/19 职场文书
单位工作证明范文
2014/09/14 职场文书
高校群众路线教育实践活动剖析材料
2014/10/10 职场文书
预防艾滋病宣传活动总结
2015/05/09 职场文书
详解JVM系列之内存模型
2021/06/10 Javascript
springboot 自定义配置 解决Boolean属性不生效
2022/03/18 Java/Android
python+pyhyper实现识别图片中的车牌号思路详解
2022/12/24 Python