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 相关文章推荐
云网广告中的代码,提示出错,大家找找
Nov 21 Javascript
js 纯数字不重复排列的另类方法
Jul 17 Javascript
汉化英文版的Dreamweaver CS5并自动提示jquery
Nov 25 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
Apr 06 Javascript
javascript判断并获取注册表中可信任站点的方法
Jun 01 Javascript
Jquery技巧(必须掌握)
Mar 16 Javascript
Bootstrap和Java分页实例第二篇
Dec 23 Javascript
Javascript中return的使用与闭包详解
Jan 11 Javascript
微信小程序通过api接口将json数据展现到小程序示例
Jan 20 Javascript
jQuery排序插件tableSorter使用方法
Feb 10 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
Apr 17 Javascript
angular4中关于表单的校验示例
Oct 16 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 pcntl_fork和pcntl_fork 的用法
2009/04/13 PHP
《PHP编程最快明白》第六讲:Mysql数据库操作
2010/11/01 PHP
使用迭代器 遍历文件信息的详解
2013/06/08 PHP
destoon之一键登录设置
2014/06/21 PHP
PHP面向对象程序设计内置标准类,普通数据类型转为对象类型示例
2019/06/12 PHP
PHP实现文件上传后台处理脚本
2020/03/04 PHP
ExtJs3.0中Store添加 baseParams 的Bug
2010/03/10 Javascript
使用 Node.js 做 Function Test实现方法
2013/10/25 Javascript
Javascript中string转date示例代码
2013/11/01 Javascript
JavaScript希尔排序、快速排序、归并排序算法
2016/05/08 Javascript
Google 地图控件集详解及实例代码
2016/08/06 Javascript
微信小程序 location API实例详解
2016/10/02 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
2016/11/24 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
2016/12/23 Javascript
JavaScript实现大图轮播效果
2017/01/11 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
2017/02/05 Javascript
Vue生命周期示例详解
2017/04/12 Javascript
原生JS+Canvas实现五子棋游戏实例
2017/06/19 Javascript
Vue自定义事件(详解)
2017/08/19 Javascript
深入理解python中的闭包和装饰器
2016/06/12 Python
python之PyMongo使用总结
2017/05/26 Python
Django 查询数据库并返回页面的例子
2019/08/12 Python
python实现机器人卡牌
2019/10/06 Python
基于pygame实现童年掌机打砖块游戏
2020/02/25 Python
Python3实现英文字母转换哥特式字体实例代码
2020/09/01 Python
pycharm如何设置官方中文(如何汉化)
2020/12/29 Python
详解CSS3中常用的样式【基本文本和字体样式】
2020/10/20 HTML / CSS
美体小铺瑞典官方网站:The Body Shop瑞典
2018/01/27 全球购物
中西医专业毕业生职业规划书
2014/02/24 职场文书
2014年助理政工师工作总结
2014/12/19 职场文书
钱学森电影观后感
2015/06/04 职场文书
2016年综治和平安建设宣传月活动总结
2016/04/01 职场文书
重温经典:乔布斯在斯坦福大学的毕业演讲(双语)
2019/08/26 职场文书
七年级之开学家长寄语35句
2019/09/05 职场文书
Python中rapidjson参数校验实现
2021/07/25 Python
使用python绘制横竖条形图
2022/04/21 Python