购好物，首页，跑马灯组件，左右滑动处理~

王强
1 parent 7e27dfc9
Showing 1 changed file with 16 additions and 17 deletions
src/components/marqueeCom/marqueeCom.vue
@@ -161,9 +161,6 @@
              */
             touchstart(e) {
  
-                // 临时，屏蔽事件操作
-                return false;
-
                 // 判断事件类型
                 if (e.type === 'touchstart') {
  
@@ -176,10 +173,7 @@
              * touchmove事件
              */
             touchmove(e) {
-
-                // 临时，屏蔽事件操作
-                return false;
-
+                
                 // 判断事件类型
                 if (e.type === 'touchmove') {
  
@@ -197,11 +191,19 @@
                         // 判断distance要 <= 0
                         if (this.control.distance <= 0) {
  
-                            // 坐标移动差值
-                            let diff = this.targetTouches.nx - this.targetTouches.ox;
-                            
-                            // 执行向左移动
-                            this.$set(this.control, 'distance', this.control.distance + diff);
+                            // 判断列表长度，不能超长
+                            if (Math.abs(this.control.distance) < (this.$refs.items[0].clientWidth * (this.$refs.items.length - this.options.minCount))) {
+
+                                // 坐标移动差值
+                                let diff = this.targetTouches.nx - this.targetTouches.ox;
+                                
+                                // 执行向左移动
+                                this.$set(this.control, 'distance', this.control.distance + diff);
+                            } else {
+
+                                // 修正this.control.distance的位置值
+                                this.$set(this.control, 'distance', -(this.$refs.items[0].clientWidth * (this.$refs.items.length - this.options.minCount)) + 1);
+                            }
  
                             // 设置移动
                             this.$refs.marqueeBox.style.transform = 'translateX(' + this.control.distance + 'px)';
@@ -219,9 +221,6 @@
              */
             touchend(e) {
  
-                // 临时，屏蔽事件操作
-                return false;
-
                 // 判断事件类型
                 if (e.type === 'touchend') {
  
@@ -233,11 +232,11 @@
                     clearInterval(this.control.interval);
  
                     // 延时两秒
-                    setTimeout(() => {
+                    // setTimeout(() => {
  
                         // 跑马灯无限循环移动函数
                         this.move(this.control.itemWidth, this.$refs.marqueeBox);
-                    }, 2000);
+                    // }, 2000);
                 }
             }
         },