Vue移动端左滑右滑

Posted knightdreams6

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue移动端左滑右滑相关的知识,希望对你有一定的参考价值。

使用的组件地址:https://github.com/vuejs/vue-touch/tree/next

注:vue2.0以上

1、安装

npm install vue-touch@next --save

 

2、main.js中引入  

import VueTouch from ‘vue-touch‘

Vue.use(VueTouch, {name: ‘v-touch‘});

 

3、在使用的页面中

  <v-touch
    @swipeleft = "swipeLeft"
    @swiperight = "swipeRight"
    :swipe-options="{direction: ‘horizontal‘}"
  >
  </v-touch>
methods:{
// 左滑 swipeLeft(){ // 页面跳转或其它操作 }, // 右滑 swipeRight(){ // 页面跳转或其它操作 },
}

注:

:swipe-options="{direction: ‘horizontal‘}"  可以解决引入该组件后不许上下滑动问题

 

以上是关于Vue移动端左滑右滑的主要内容,如果未能解决你的问题,请参考以下文章

小程序 手机左滑右滑事件监听

移动端 Touch 事件

Android移动应用开发之ViewPager

Android移动应用开发之ViewPager

flutter系列之:移动端的手势基础GestureDetector

前端托牵效果