使用vue-touch实现移动端左右滑动屏幕切换页面（左右滑动切换路由）

1.安装vue-touch

npm install vue-touch@next --save

2.在main.js中引入

import VueTouch from 'vue-touch'
Vue.use(VueTouch,{name:'v-touch'})
VueTouch.config.swipe = {
threshold:50 //设置左右滑动的距离
}
3.在路由的index.js中配置

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import GoodsList from '@/view/GoodList'
import GoodDetail from '@/view/GoodDetail'Vue.use(Router)export default new Router({routes: [{path: '/',name: 'HelloWorld',component: HelloWorld},{path:'/goods',name:'GoodsList',component:GoodsList},{path:'/detail',name:'GoodDetail',component:GoodDetail}]
})

4.在某页面中

<template><div class="hello"><v-touch v-on:swipeleft="swiperleft"  v-on:swiperight="swiperright" class="wrapper">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</v-touch></div>
</template>
<script>export default {name: 'HelloWorld',methods:{swiperleft: function () {  //左划切换到goods页this.$router.push({'path':'/goods'});},swiperright: function () { //右滑切换到detail页this.$router.push({'path':'/detail'});}}}
</script>

使用vue-touch实现移动端左右滑动屏幕切换页面（左右滑动切换路由）相关推荐

Vue出现弹出层时，禁止底部页面跟随滑动
背景:最近在写一个vue项目,当出现弹出层时,发现底部页面跟随滚动,但是产品不想要这种效果,于是找各种资料,发现很多说法,但是试了试,发现有的根本就不行,比如说有人提出用vue中提供的@touchmo ...
android切换页面上滑动动画,Android ViewPager多页面滑动切换以及动画效果
评论 #28楼[楼主] 2012-06-01 14:27D.Winter @孤寒江雪我猜要么在头尾各再加入一个页卡在页卡切换监听中判断,如果选中了头尾的页卡,就返回到相邻的那个页卡.头尾页卡的界 ...
移动端下拉刷新与页面内滑动冲突问题 iscroll 固定行表头苹果下拉反弹
此方法在安卓6的自带下拉刷新的APP内无效. 做移动app项目时,用的是app内嵌webview的方法,遇到问题. 在安卓6中,app原生自带下拉刷新,与界面内的下滑冲突. 开始考虑通过在touchm ...
android 页面整体滑动,ScrollView 实现页面整体滑动
页眉整体垂直方向滑动,xml文件较为简单,只需要在需要滑动的布局文件中包裹一层ScrollView就可以实现. 示例: xmlns:app="http://schemas.android.c ...
小程序滑动屏幕切换视频
项目需求:滑动屏幕,切换短视频,实现类似抖音等短视频平台的视频切换效果最终效果图:滑动屏幕自动加载,切换视频和产品图片分析:video是原生标签,层级太高,在全屏的情况下,其他组件均会被遮挡,所幸 ...
移动端touch事件---利用bootstrap实现轮播图手指左右滑动事件
还记的我上篇文章实现了图片响应式滑动,如果不知道怎样实现图片在超宽屏幕居中显示,且也不知道怎样实现图片的响应式效果(专门针对移动端的),可以再继续看看我写的这篇文章.狠狠地点击这里那么针对移动端,如 ...
android 层叠轮播,vue手写一个卡片化层叠轮播（支持滑动，移动端连续滚动，点击）...
项目需求,需要写一个卡片化层叠的轮播,找了下插件都没有合适的,于是写了一个展示5个卡片的轮播先看效果图: 卡片化层叠轮播 5个卡片要计算各自的高度,宽度,利用相对定位计算出各自的位置然后trans ...
vue学习笔记-02-前端的发展历史浅谈mmvm设计理念
vue学习笔记-02-前端的发展历史浅谈mmvm设计理念文章目录 1. MVVM模式的实现者 2.第一个vue程序 3.什么是mvvm? 4.为什么要用mvvm? 5.mvvm的组成部分 7.MVV ...
html禁止页面左右滑动,js阻止移动端默认事件以及只阻止横向滚动事件方法
js阻止移动端默认事件,是在相关的touch事件的时候利用event.preventDefault();来阻止默认滚动行为,但是如果要实现阻止横向滚动行为而不阻止竖向滚动行为就要写一个方法通过手指滑动 ...
移动端html5手写板,Vue+canvas实现移动端手写板步骤详解
这次给大家带来Vue+canvas实现移动端手写板步骤详解,Vue+canvas实现移动端手写板的注意事项有哪些,下面就是实战案例,一起来看一下. 清除保存 Canvas画板 var draw; v ...

使用vue-touch实现移动端左右滑动屏幕切换页面（左右滑动切换路由）

使用vue-touch实现移动端左右滑动屏幕切换页面（左右滑动切换路由）相关推荐

最新文章

热门文章