Commit e0a5f936754c72f7e4e43304a86c934805b20e60
1 parent
7e27dfc9
购好物，首页，跑马灯组件，左右滑动处理~
Showing
1 changed file
with
16 additions
and
17 deletions
src/components/marqueeCom/marqueeCom.vue
| @@ -161,9 +161,6 @@ | @@ -161,9 +161,6 @@ | ||
| 161 | */ | 161 | */ |
| 162 | touchstart(e) { | 162 | touchstart(e) { |
| 163 | 163 | ||
| 164 | - // 临时，屏蔽事件操作 | ||
| 165 | - return false; | ||
| 166 | - | ||
| 167 | // 判断事件类型 | 164 | // 判断事件类型 |
| 168 | if (e.type === 'touchstart') { | 165 | if (e.type === 'touchstart') { |
| 169 | 166 | ||
| @@ -176,10 +173,7 @@ | @@ -176,10 +173,7 @@ | ||
| 176 | * touchmove事件 | 173 | * touchmove事件 |
| 177 | */ | 174 | */ |
| 178 | touchmove(e) { | 175 | touchmove(e) { |
| 179 | - | ||
| 180 | - // 临时，屏蔽事件操作 | ||
| 181 | - return false; | ||
| 182 | - | 176 | + |
| 183 | // 判断事件类型 | 177 | // 判断事件类型 |
| 184 | if (e.type === 'touchmove') { | 178 | if (e.type === 'touchmove') { |
| 185 | 179 | ||
| @@ -197,11 +191,19 @@ | @@ -197,11 +191,19 @@ | ||
| 197 | // 判断distance要 <= 0 | 191 | // 判断distance要 <= 0 |
| 198 | if (this.control.distance <= 0) { | 192 | if (this.control.distance <= 0) { |
| 199 | 193 | ||
| 200 | - // 坐标移动差值 | ||
| 201 | - let diff = this.targetTouches.nx - this.targetTouches.ox; | ||
| 202 | - | ||
| 203 | - // 执行向左移动 | ||
| 204 | - this.$set(this.control, 'distance', this.control.distance + diff); | 194 | + // 判断列表长度，不能超长 |
| 195 | + if (Math.abs(this.control.distance) < (this.$refs.items[0].clientWidth * (this.$refs.items.length - this.options.minCount))) { | ||
| 196 | + | ||
| 197 | + // 坐标移动差值 | ||
| 198 | + let diff = this.targetTouches.nx - this.targetTouches.ox; | ||
| 199 | + | ||
| 200 | + // 执行向左移动 | ||
| 201 | + this.$set(this.control, 'distance', this.control.distance + diff); | ||
| 202 | + } else { | ||
| 203 | + | ||
| 204 | + // 修正this.control.distance的位置值 | ||
| 205 | + this.$set(this.control, 'distance', -(this.$refs.items[0].clientWidth * (this.$refs.items.length - this.options.minCount)) + 1); | ||
| 206 | + } | ||
| 205 | 207 | ||
| 206 | // 设置移动 | 208 | // 设置移动 |
| 207 | this.$refs.marqueeBox.style.transform = 'translateX(' + this.control.distance + 'px)'; | 209 | this.$refs.marqueeBox.style.transform = 'translateX(' + this.control.distance + 'px)'; |
| @@ -219,9 +221,6 @@ | @@ -219,9 +221,6 @@ | ||
| 219 | */ | 221 | */ |
| 220 | touchend(e) { | 222 | touchend(e) { |
| 221 | 223 | ||
| 222 | - // 临时，屏蔽事件操作 | ||
| 223 | - return false; | ||
| 224 | - | ||
| 225 | // 判断事件类型 | 224 | // 判断事件类型 |
| 226 | if (e.type === 'touchend') { | 225 | if (e.type === 'touchend') { |
| 227 | 226 | ||
| @@ -233,11 +232,11 @@ | @@ -233,11 +232,11 @@ | ||
| 233 | clearInterval(this.control.interval); | 232 | clearInterval(this.control.interval); |
| 234 | 233 | ||
| 235 | // 延时两秒 | 234 | // 延时两秒 |
| 236 | - setTimeout(() => { | 235 | + // setTimeout(() => { |
| 237 | 236 | ||
| 238 | // 跑马灯无限循环移动函数 | 237 | // 跑马灯无限循环移动函数 |
| 239 | this.move(this.control.itemWidth, this.$refs.marqueeBox); | 238 | this.move(this.control.itemWidth, this.$refs.marqueeBox); |
| 240 | - }, 2000); | 239 | + // }, 2000); |
| 241 | } | 240 | } |
| 242 | } | 241 | } |
| 243 | }, | 242 | }, |