Vue中使用原生js实现轮播图滑动效果

1.在视图层模板里面绑定touchstart和touchend事件

        <div class="tuWap" @touchstart="touchStart" @touchend="touchEnd">
          <div class="zuoCaidan">
            <img src="./images/biaoti.png" alt="" />
          </div>
          <div class="youceBig">
            <div class="youce">
              <img src="./images/gongzhengqian.png" alt="" />
              <img src="./images/renshiqian.png" alt="" />
              <img src="./images/bianjieqian.png" alt="" />
            </div>
          </div>
          <div class="fenyeqi">
            <div class="dangqianYe"></div>
          </div>
        </div>

2.事件方法:

     data() {
        return {
            startX: '', //鼠标开始坐标
            endX: '',   //鼠标结束坐标
            index:0,    //当前轮播图下标 
        }
      },
        
      methods:{
          touchStart(e) {
            this.startX = e.touches[0].clientX;
        },
        touchEnd(e){
            this.endX = e.changedTouches[0].clientX;
            // 在滑动超过一定的距离时再切换题目
            if (Math.abs(this.endX - this.startX) < 10) return;
            // 判断，向左还是向右
            if (this.endX > this.startX) { //向左
              if (this.index - 1 >= 0) this.index-=1;
            } else {  //向右
              if (this.index + 1 < 3) this.index+=1;
            }
            // 当前平移距离
            let pianyiX = -30 * this.index;
            // 当前分页器按钮位置
            let fenyeIndex=30 * this.index
            document.getElementsByClassName('youce')[0].style.transform = `translateX(${pianyiX}vw)`;
            document.getElementsByClassName('dangqianYe')[0].style.marginLeft = `${fenyeIndex}%`;
        }
      
      }