美文网首页
2019-07-22vue监听手指滑动vue-touch的使用

2019-07-22vue监听手指滑动vue-touch的使用

作者: Kason晨 | 来源:发表于2019-07-22 17:45 被阅读0次

    由于需要监听手指的左右滑动事件,所以用到了v-touch这个插件。

    npm安装

    npm install 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>
    

    js

    export default {
      name: 'Queue',
      data () {
        return {
        
        }
      },
      methods: {
        swiperleft: function () {
         console.log("左划")
        },
        swiperright: function () {
         console.log("右滑")
        }
      }
    
    }
    
    

    相关文章

      网友评论

          本文标题:2019-07-22vue监听手指滑动vue-touch的使用

          本文链接:https://www.haomeiwen.com/subject/tczwlctx.html