欢迎大家进群，一起探讨学习

微信公众号，每天给大家提供技术干货

博主技术笔记

博主网站地址1

博主网站地址2

博主开源微服架构前后端分离技术博客项目源码地址，欢迎各位star

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;}