vue2.0移动端滑动事件vue-touch的实例代码
更新时间：2018年11月27日 08:49:05 作者：你蠢哭我咯
这篇文章主要介绍了vue2.0移动端滑动事件vue-touch的实例代码,需要的朋友可以参考下
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的MVVM库Vue.js入门学习笔记,Vue.js是一个新兴的js库,主要用于实现响应的数据绑定和组合的视图组件,需要的朋友可以参考下2016-05-05
vue-router 默认是hash模式，使用url的hash来模拟一个完整的url，当url改变的时候，页面不会重新加载。这篇文章主要介绍了在nginx上部署vue项目(history模式),需要的朋友可以参考下2017-12-12
这篇文章主要介绍了vue的nextTick的使用,本文从源码出发给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-11-11
这篇文章主要介绍了Vue源码解读之Component组件注册的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了Vue如何处理Axios多次请求数据显示问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要介绍了vue项目打包后放服务器非根目录下图片找不到问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12
这篇文章主要介绍了茶余饭后聊聊Vue3.0响应式数据那些事儿，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
本篇文章主要介绍了vue使用mint-ui实现下拉刷新和无限滚动的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
使用Vue.js和Element-UI做一个简单登录页面的实例
下面小编就为大家分享一篇使用Vue.js和Element-UI做一个简单登录页面的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
WebStorm是一个非常适合学习和开发Vue项目的集成开发环境,下面这篇文章主要给大家介绍了关于利用WebStorm创建一个Vue项目的完整步骤,文中通过图文介绍的非常详细,需要的朋友可以参考下2024-06-06
最新评论