web前端手册

vue-touch实现移动端的左划右划实现

2019-05-27  本文已影响9人  辉夜真是太可爱啦

首先,安装插件vue-touch

npm install vue-touch@next --save

main.js中进行引入

import VueTouch from 'vue-touch'
Vue.use(VueTouch, {name: 'v-touch'})

将你要实现左划右划的div块包裹起来

<v-touch @swipeleft="swiperleft" @swiperight="swiperright" class="wrapper">
      <div class="menu-container" ref="menuContainer">    
    <!-- 这个是内容 -->  
      </div>
  </v-touch>

methods中写入你要实现的具体功能

methods: {
    swiperLeft() {
      this.$router.push({'path':'/queuehistory'});   
    },
    swiperRight() {
      this.$router.back(-1);    //返回前一页
    }
  }

附上原作者的链接原作者链接

上一篇下一篇

猜你喜欢

热点阅读