Vue移动端左滑右滑

时间：2019-12-02 11:39:24 阅读：91 评论：0 收藏：0 [点我收藏+]

使用的组件地址：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‘}"  可以解决引入该组件后不许上下滑动问题

原文地址：https://www.cnblogs.com/knightdreams6/p/11969542.html

踩

(0)

评论一句话评论（0）