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

最新推荐文章于 2024-06-12 15:17:57 发布

意中人Crush

最新推荐文章于 2024-06-12 15:17:57 发布

阅读量4.5k

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_69555866/article/details/126521738

本文介绍如何使用vue-touch插件为Vue应用添加触屏滑动事件。通过安装配置及示例代码，展示了如何实现页面间的左右滑动切换效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>