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 相关文章推荐
js 编写规范
Mar 03 Javascript
jQuery 源码分析笔记(7) Queue
Jun 19 Javascript
火狐4、谷歌12不支持Jquery Validator的解决方法分享
Jun 20 Javascript
JavaScript XML和string相互转化实现代码
Jul 04 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
May 31 Javascript
用jquery统计子菜单的条数示例代码
Oct 18 Javascript
jquery实现的鼠标拖动排序Li或Table
May 04 Javascript
js实现按Ctrl+Enter发送效果
Sep 18 Javascript
分享15个大家都熟知的jquery小技巧
Dec 02 Javascript
vue2.0开发实践总结之疑难篇
Dec 07 Javascript
jQuery Validate 数组 全部验证问题
Jan 12 Javascript
js中toString()和String()区别详解
Mar 23 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 XML error parsing SOAP payload on line 1
2010/06/17 PHP
无法在发生错误时创建会话,请检查 PHP 或网站服务器日志,并正确配置 PHP 安装(win+linux)
2012/05/05 PHP
php获取目标函数执行时间示例
2014/03/04 PHP
Jquery cookie操作代码
2010/03/14 Javascript
基于jquery tab切换(防止页面刷新)
2012/05/23 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
2013/09/25 Javascript
javascript打印输出json实例
2013/11/11 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
2015/05/06 Javascript
jQuery横向擦除焦点图特效代码分享
2015/09/06 Javascript
vue.js入门教程之绑定class和style样式
2016/09/02 Javascript
jQuery Ajax使用FormData对象上传文件的方法
2016/09/07 Javascript
详解jQuery简单的表格应用
2016/12/16 Javascript
深入理解vue路由的使用
2017/03/24 Javascript
Vue 进阶教程之v-model详解
2017/05/06 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
2017/09/20 Javascript
过滤器vue.filters的使用方法实现
2019/09/18 Javascript
分析在Python中何种情况下需要使用断言
2015/04/01 Python
django批量导入xml数据
2016/10/16 Python
利用python爬取软考试题之ip自动代理
2017/03/28 Python
Python基础知识_浅谈用户交互
2017/05/31 Python
python实现多人聊天室
2020/03/31 Python
如何使用Python多线程测试并发漏洞
2019/12/18 Python
英国天然抗衰老护肤品品牌:Nakin Skin Care
2019/04/16 全球购物
说出数据连接池的工作机制是什么?
2013/04/19 面试题
小学教师学期末自我评价
2013/09/25 职场文书
领导干部培训感言
2014/01/23 职场文书
公司廉洁自律承诺书
2014/03/27 职场文书
大学生求职信例文
2014/06/29 职场文书
美德少年事迹材料1000字
2014/08/21 职场文书
2014年加油站工作总结
2014/12/04 职场文书
2015年妇幼保健工作总结
2015/05/19 职场文书
JavaScript原始值与包装对象的详细介绍
2021/05/11 Javascript
MySQL系列之十二 备份与恢复
2021/07/02 MySQL
Go获取两个时区的时间差
2022/04/20 Golang
Mybatis-Plus 使用 @TableField 自动填充日期
2022/04/26 Java/Android
浅谈音视频 pts dts基本概念及理解
2022/08/05 数码科技