0
点赞
收藏
分享

微信扫一扫

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

心智的年轮 2022-03-24 阅读 145
vue.js

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()
 }
举报

相关推荐

0 条评论