技術標籤：javascript

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

          mounted(){
            // 有if判斷的dom元素新增一個延時器方便獲取dom元素
            setTimeout(()=>{
            this.slideBanner()
            },1000)
          },


       slideBanner()  {
          //選中item的盒子  goods-detail-carousel
          
          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;
              }
          });
      },