Element UI 走马灯 移动端实现用手指可以左右滑动

Element UI 走马灯 移动端实现用手指可以左右滑动

Element UI的轮播I图，在移动端实现手指左右滑动

• 定义一个ref='slideCarousel’的轮播图

 <el-carousel :interval="4000" type="card" ref="slideCarousel"><el-carousel-item v-for="item in banner1" :key="item"><img :src="item" class="medium" alt=""></el-carousel-item>
</el-carousel>

• 手指左右滑动该方法直接在mounted中调用即可

	// 滑动切换slideBanner() {//选中的轮播图var box = document.querySelector('.el-carousel__container');var startPoint = 0;var stopPoint = 0;//重置坐标var resetPoint = function () {startPoint = 0;stopPoint = 0;}//手指按下box.addEventListener("touchstart", function (e) {//手指点击位置的X坐标startPoint = e.changedTouches[0].pageX;});//手指滑动box.addEventListener("touchmove", function (e) {//手指滑动后终点位置X的坐标stopPoint = e.changedTouches[0].pageX;});//当手指抬起的时候，判断图片滚动离左右的距离let that = thisbox.addEventListener("touchend", function (e) {console.log("1：" + startPoint);console.log("2：" + stopPoint);if (stopPoint == 0 || startPoint - stopPoint == 0) {resetPoint();return;}if (startPoint - stopPoint > 0) {resetPoint();that.$refs.slideCarousel.next();return;}if (startPoint - stopPoint < 0) {resetPoint();that.$refs.slideCarousel.prev();return;}});},

 mounted() {//调用方法this.slideBanner()}