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 = this
	  box.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()
 }