vue+elementui实现移动端图片手指滑动

一起探讨学习

每天给大家提供技术干货

博主技术笔记 https://notes.xiyankt.com

博主开源微服架构前后端分离技术博客项目源码地址，欢迎各位star https://gitee.com/bright-boy/xiyan-blog

vue实现移动端图片手指滑动

安装

npm install vue-touch@next --save

main.js中引入：

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

<el-carousel :interval="4000" indicator-position="outside" height="840px" ref="carousel">
      <el-carousel-item v-for="(item,index) in banners" :key="item.url">
        <v-touch :swipe-options="{direction: 'horizontal'}" v-on:swipeleft="swiperleft(index)" v-on:swiperight="swiperright(index)" class="wrapper">
        <div class="menu-container" ref="menuContainer">   
          <img v-lazy="item.url"/>
        </div>
       </v-touch>
      </el-carousel-item>
    </el-carousel>

  methods: {
    //设置滑动切换轮播图
    swiperleft: function (index) {
      //上一页
      this.$refs.carousel.prev();
      //设置幻灯片的索引
      this.$refs.carousel.setActiveItem(index - 1);
    },
    swiperright: function (index) {
      //下一页
      this.$refs.carousel.next();
      this.$refs.carousel.setActiveItem(index + 1);
    },
  },

发现BUG：vue-touch不能上下滑动的问题

.wrapper {
  touch-action: pan-y !important;
}