vue实现京东商品秒杀的拖动效果

亦凉 2022-09-07 01:23 224阅读 0赞

### 文章目录 ###

*  前言
 *  一、自述：
 *  二、功能实现

--------------------

# 前言 #

# 一、自述： #

最近在使用vue写一个仿京东的作品。在商品拖动这一方面遇到了一些问题，后来解决了。虽然写的比较死板，但是也算是有自己的思考在里面。所以，写下这篇博客，希望能给大家一些帮助。

大致效果如下:

![等一下啦，马上出来][bcee7c9930e246c498c61f2ae043e84b.gif_pic_center]

# 二、功能实现 #

**这里还是要给大家写详细一点，首先看一下我们需要用到的知识点：**

touch事件：//因为我写的是移动端的作品。所以要用到触摸事件
    1.touchstart 
    2.touchmove

**下面看下博主的思路：**

1.监听用户刚开始触发的位置，用移动的位置减去刚开始触发的位置。那么就是拖动的距离

2.需要设置中间变量保存上一次拖动离开的位置，不然，下次触发，又会重头开始计算。界面会回到开始位置，而不是你离开后的位置。

**代码实现：**

***1.现在data中写下自己要使用的变量的名字***

startX:0, // 起点
                        moveX:0, // 移动距离
                        endX:0, // 终点`在这里插入代码片`
                        distanceX:0, // 移动距离
                        stopX:0, // 暂停时距离
                        marginLeft:'', // 距离属性

**2.在methods中写拖动方法：**

dragStart(){  // 开始触发 
                            this.startX = event.touches[0].clientX;  //获取开始触发时候的位置
                        },

dragEnd(){  // 结束
                          this.stopX = this.distanceX; // 保存上次的位置
                        }

**核心代码：**

**注意：**

**博主越界处理这里写的很死。如果大家有好的想法，可以告诉我哦，一起学习。  
越界处理主要是拖动的时候，可能会出现拖走商品的时候，当前界面的一部分内容出现空白的情况。**

dragMove(){  // 移动    
                            this.moveX = event.touches[0].clientX;  // 获取移动后的位置
                            this.distanceX = this.moveX - this.startX + this.stopX;  // 移动距离,注意加上暂停时的距离
                            let secWidth = this.$refs.sec.offsetWidth; // 获取容器宽度 if(this.distanceX <= - secWidth / 2){  // 越界处理
                                this.marginLeft = - this.secWidth / 2 +  'px';
                            }else if(this.distanceX >= 0){ 
                                this.marginLeft = 0;
                            }else{ 
                                this.marginLeft = this.distanceX + 'px';
                            }
                                
                        },

下面看下标签部分：

<div class="seckill-swiper" ref = "sec" @touchstart.stop.prevent = "dragStart()" @touchmove.stop.prevent = "dragMove()" @touchend.stop.prevent = "dragEnd()" :style = "{ marginLeft:marginLeft}">
                        <seckill v-for = "(item,index) in 12" :seckillGoods = "slideData[index]"></seckill>
                    </div>

**补充：**  
**博主在给元素绑定事件的时候，使用了事件修饰符，目的是为了取消touch自带的原生事件。防止拖动的时候，整个界面跟着一起拖动。**

那么，就到这里了，大家有什么好的想法，可以在评论区告诉我啦。

[bcee7c9930e246c498c61f2ae043e84b.gif_pic_center]: /images/20220829/a064d39c44ea48e393bbce56a410d112.png