手指滑动轮播图（针对没有滑动效果的手指滑动ui框架）

           data(){
            return{
                isautoplay:false
            }
          },                    

          mounted(){
            // 有if判断的dom元素添加一个延时器方便获取dom元素
            setTimeout(()=>{
            this.slideBanner()
            },1000)
          },


       slideBanner()  {
          //选中item的盒子
          
          var box = document.querySelector('.goods-detail-carousel');
         
          // console.log(box);
          //手指起点X坐标
          var startPoint = 0;
          //手指滑动重点X坐标
          var stopPoint = 0;
          //重置坐标
          var resetPoint =  function(){
              startPoint = 0;
              stopPoint = 0;
          }
          //手指按下
          let _this = this
          box.addEventListener("touchstart",function(e){
              //手指点击位置的X坐标
              startPoint = e.changedTouches[0].pageX;
              _this.isautoplay=false
          },true);
          //手指滑动
          box.addEventListener("touchmove",function(e){
              //手指滑动后终点位置X的坐标
              stopPoint = e.changedTouches[0].pageX;
          });
          //当手指抬起的时候，判断图片滚动离左右的距离
          box.addEventListener("touchend",function(e){
              // console.log("1："+startPoint);
              // console.log("2："+stopPoint);
              if(stopPoint == 0 || startPoint - stopPoint == 0){
                  // console.log('不滑');
                  _this.isautoplay=true
                  resetPoint();
                  return;
              }
              if(startPoint - stopPoint > 0){
                  // console.log('左滑');
                  _this.$nextTick(()=>{
                      _this.$refs.carousel.next();
                      setTimeout(()=>{
                          _this.isautoplay=true
                      },3000)
                  }) 
                  resetPoint();
                  return;
              }
              if(startPoint - stopPoint < 0){
                  // console.log('右滑');
                    _this.$nextTick(()=>{
                      _this.$refs.carousel.prev();
                          setTimeout(()=>{
                          _this.isautoplay=true
                      },3000)
                  }) 
                  resetPoint();
                  return;
              }
          });
      },

标签：stopPoint,手指,轮播,console,isautoplay,滑动,startPoint,log
来源： https://blog.csdn.net/chj_2020/article/details/113755193