Vue creates image carousel

This time I will bring you Vue to create a picture carousel. What are theprecautionsfor making a picture carousel with Vue. The following is a practical case, let's take a look.

I have never written a component seriously before. In the past, when writing business code, I always used components packaged by others. This time I tried to write a picture carousel component. Although it is not as good as the well-known carousel component, its functions are basically complete, and it is In the process of writing this component, I learned a lot, and I will share it with you here. If there are any omissions, please correct me!

Before making this component, the author googled a lot of articles about carousels and found that although the ideas for implementing a carousel are different, the general logic is actually the same. This article is mainly based on the focus wheel on MOOC. For this lesson on special effects for broadcasting images, MOOC mainly uses native JS to write it, while the author reconstructed it using Vue and made some modifications. The completed component renderings are as follows:

1. Clarify your ideas and understand the needs and principles

1. What kind of carousel should I write?

• When you click the arrow on the right, the picture slides to the left to the next one; when you click on the arrow on the left, the picture slides to the right to the next one

• Click the small dot below, slide to the corresponding picture, and the style of the corresponding small dot will also change

• Requires atransition effect, slide over slowly

• When the mouse hovers over the picture, the carousel is paused, and when the mouse leaves, the carousel continues

• Autoplay function

• Infinite scrolling, that is, when scrolling to the last picture, when you click on the next picture, it will continue to slide to the left to the first picture, instead of pulling the entire One, it’s a bit difficult here

2. Understand the principle of infinite carousel

Let’s take a look at the schematic diagram first:

The red line area in the picture is the picture we see. This carousel only displays 5 pictures, but there are two pictures at the beginning and end of it. The picture is placed in front of Picture 1 5. Place Figure 1 behind Figure 5. The reason for doing this is to achieve infinite scrolling. The principle of infinite scrolling is: when the entire picture scrolls to the left to Figure 5 on the right, it will continue to move forward to Figure 1. After Figure 1 is fully displayed, it will be pulled back to the right at a speed invisible to the naked eye. Go to Figure 1 on the far left. In this way, even if you slide to the left, you will see Figure 2.

As shown below: After the last picture 1 completes the transition and is fully displayed, the entire list is instantly pulled to the right to picture 1 on the left. The scrolling of the other boundary map Figure 5 is also the same, but in the opposite direction.

2. Let the pictures switch first

1. Layout and Prepare

Okay, the layout is probably like this, the rendering is as follows:

The above code has been commented, there are several points Let me mention it again:

• window is a red line frame with a width of 600px. It will not move. What moves is the container wrapping the image. Its movement method is: style=" containerStyle", this is a calculated property, use transform:translate3d(${this.distance, 0, 0}) to control left and right movement

• distance and currentIndex in data are the key, distance controls the moving distance, the default is -600, and displays the second of 7 pictures, which is Figure 1. currentIndex is the index of the picture displayed by the window. The default here is 1, which is also the second picture among the 7 pictures.

• There are only 5 pictures that need to be displayed, but a picture 5 is placed in front of picture 1 and a picture 1 is placed after picture 5 for infinite scrolling. The principle is mentioned before

• 当点击右侧的箭头，container向左移动, distance 会越来越小；当点击左侧的箭头，container向右移动， distance 会越来越大，方向不要弄错

2. 图片切换

我们在左侧和右侧的箭头上添加点击事件：

 
  
 
  
 
 ...... methods:{ move(offset, direction) { this.distance += this.distance * direction if (this.distance < -3000) this.distance = -600 if (this.distance > -600) this.distance = -3000 } }

解释下上面的代码：点击左侧或者右侧的箭头，调用move函数，move接收偏移量offset和方向direction两个参数。direction只传两个值，1表示container向右移动，-1表示container向左移动；偏移量是600，也就是一张图片的宽度。如果移动到7张图片的最后一张，就把container拉到7张图片里的第二张；如果移动到7张图片里第一张，就把container拉到7张图片里的第5张。

效果：

可以看到，图片切换效果已经出来了，但是下面的小圆点没有跟着变换。接下来我们把这个效果加上。从上面的html代码可以看到， :class="{dotted: i === (currentIndex - 1)}" ，小圆点的切换效果和data里的currentIndex值相关，我们只要随着图片切换变动currentIndex值就可以了。

修改move方法里的代码：

......

move(offset, direction) { direction === -1 ? this.currentIndex++ : this.currentIndex-- if (this.currentIndex > 5) this.currentIndex = 1 if (this.currentIndex < 1) this.currentIndex = 5 this.distance = this.distance + offset * direction if (this.distance < -3000) this.distance = -600 if (this.distance > -600) this.distance = -3000 }

上面的添加的三行代码很好理解，如果是点击右侧箭头，container就是向左移动， this.currentIndex 就是减1，反之就是加1。

效果：

可以看到，小圆点的切换效果已经出来了。

三、过渡动画

上面的代码已经实现了切换，但是没有动画效果，显的非常生硬，接下来就是给每个图片的切换过程添加过渡效果。

这个轮播组件笔者并没有使用Vue自带的class钩子，也没有直接使用css的transition属性，而是用慕课网原作者讲的setTimeout方法加递归来实现。

其实我也试过使用Vue的钩子，但是总有一些小问题解决不掉；比如下面找到的这个例子：例子

这个例子在过渡的边界上有一些问题，我也遇到了，而且还是时有时无。而如果使用css的transition过渡方法，在处理边界的无限滚动上总会在chrome浏览器上有一下闪动，即使添加了 -webkit-transform-style:preserve-3d; 和 -webkit-backface-visibility:hidden 也还是没用，而且要配合transition的 transitionend 事件对于IE浏览器的支持也不怎么好。

如果大家有看到更好的办法，请在评论中留言哦~

下面我们来写这个过渡效果，主要是改写：

methods:{ move(offset, direction) { direction === -1 ? this.currentIndex++ : this.currentIndex-- if (this.currentIndex > 5) this.currentIndex = 1 if (this.currentIndex < 1) this.currentIndex = 5 const destination = this.distance + offset * direction this.animate(destination, direction) }, animate(des, direc) { if ((direc === -1 && des < this.distance) || (direc === 1 && des > this.distance)) { this.distance += 30 * direc window.setTimeout(() => { this.animate(des, direc) }, 20) } else { this.distance = des if (des < -3000) this.distance = -600 if (des > -600) this.distance = -3000 } } }

上面的代码是这个轮播我觉得最麻烦、也是最难理解的地方。

来理解一下：首先，我们对于move方法进行了改写，因为要一点点的移动，所以要先算出要移动到的目标距离。然后，我们写一个animate函数来实现这个过渡。这个animate函数接收两个参数，一个是要移动到的距离，另一个是方向。 如果我们点击了右侧的箭头，container要向左侧移动，要是没有移动到目标距离，就在 this.distance 减去一定的距离，如果减去后还是没有到达，在20毫米以后再调用这个 this.animate ，如此不断移动，就形成了过渡效果。而如果移动到了目标距离，那就将目标距离赋值给 this.distance ，然后再进行边界和无限滚动的判断。

当然，使用window.setInterval()也可以实现这个效果，而且会稍微好理解一点，因为没有用到递归：

methods:{ move(offset, direction) { direction === -1 ? this.currentIndex++ : this.currentIndex-- if (this.currentIndex > 5) this.currentIndex = 1 if (this.currentIndex < 1) this.currentIndex = 5 const destination = this.distance + offset * direction this.animate(destination, direction) }, animate(des, direc) { const temp = window.setInterval(() => { if ((direc === -1 && des < this.distance) || (direc === 1 && des > this.distance)) { this.distance += 30 * direc } else { window.clearInterval(temp) this.distance = des if (des < -3000) this.distance = -600 if (des > -600) this.distance = -3000 } }, 20) } }

实现出来的效果如下：

四、简单节流一下

写到这里，效果是出来了，但是会有一点问题，如果多次快速点击，就会有可能出现下面这种情况：

出现这种情况的原因很简单，因为是使用定时器过渡，所以连续快速点击就会出现错乱，简单节流一下就好了： 在过渡完成之前点击箭头无效，其实就是设了一个闸，第一次点击把闸打开，在闸再次打开之前，让一部分代码无法执行，然后再在恰当的时机把闸打开。

我们把这个闸设在move函数里：

move(offset, direction) { if (!this.transitionEnd) return //这里是闸 this.transitionEnd = false //开闸以后再把闸关上 direction === -1 ? this.currentIndex++ : this.currentIndex-- if (this.currentIndex > 5) this.currentIndex = 1 if (this.currentIndex < 1) this.currentIndex = 5 const destination = this.distance + offset * direction this.animate(destination, direction) }

this.transitionEnd 是这个闸的钥匙，我们把它放到data里：

this.transitionEnd: true

这个闸一开始默认的状态是开着的，第一次点击以后，这个闸就关上了， this.tranisitonEnd = false ，在再次打开之前，后面的代码都执行不了。接下来就是在恰当的时机把这个闸打开，而这个恰当的时机就是过渡完成时，也就是在 animate函数 里：

animate(des, direc) { if (this.temp) { window.clearInterval(this.temp) this.temp = null } this.temp = window.setInterval(() => { if ((direc === -1 && des < this.distance) || (direc === 1 && des > this.distance)) { this.distance += 30 * direc } else { this.transitionEnd = true //闸再次打开 window.clearInterval(this.temp) this.distance = des if (des < -3000) this.distance = -600 if (des > -600) this.distance = -3000 } }, 20) }

这下快速点击就没有之前的那个问题了：

五、点击小圆点实现图片过渡切换

到目前为止的代码：

接下来我们要实现点击下面的小圆点来实现过渡和图片切换。

在点击小圆点的时候我们调用 jump 函数，并将索引 i+1 传给它。 这里需要特别注意，小圆点的索引和图片对应的索引不一致，图片共7张，而5个小圆点对应的是图片中中间的5张，所以我们才传 i+1 。

jump(index) { const direction = index - this.currentIndex >= 0 ? -1 : 1 //获取滑动方向 const offset = Math.abs(index - this.currentIndex) * 600 //获取滑动距离 this.move(offset, direction) }

上面的代码有一个问题，在jump函数里调用move方法，move里对于currentIndex的都是 +1 ，而点击小圆点可能是将 currentIndex 加或者减好多个，所以要对move里的代码修改下：

direction === -1 ? this.currentIndex += offset/600 : this.currentIndex -= offset/600

改一行，根据offset算出currentIndex就行了。

但是又有一个问题，长距离切换速度太慢，如下：

所以我们需要控制一下速度，让滑动一张图片耗费的时间和滑动多张图片耗费的时间一样，给move和animate函数添加一个speed参数，还要再算一下：

jump(index) { const direction = index - this.currentIndex >= 0 ? -1 : 1 const offset = Math.abs(index - this.currentIndex) * 600 const jumpSpeed = Math.abs(index - this.currentIndex) === 0 ? this.speed : Math.abs(index - this.currentIndex) * this.speed this.move(offset, direction, jumpSpeed) }

六、自动播放与暂停

前面的写的差不多了，到这里就非常简单了，写一个函数play：

play() { if (this.timer) { window.clearInterval(this.timer) this.timer = null } this.timer = window.setInterval(() => { this.move(600, -1, this.speed) }, 4000) }

除了初始化以后自动播放，还要通过mouseover和mouseleave来控制暂停与播放：

stop() { window.clearInterval(this.timer) this.timer = null }

七、 两处小坑

1. window.onblur 和 window.onfocus

写到这里，基本功能都差不多了。但是如果把页面切换到别的页面，导致轮播图所在页面失焦，过一段时间再切回来会发现轮播狂转。原因是页面失焦以后，setInterval停止运行，但是如果切回来就会一次性把该走的一次性走完。解决的方法也很简单，当页面失焦时停止轮播，页面聚焦时开始轮播。

window.onblur = function() { this.stop() }.bind(this) window.onfocus = function() { this.play() }.bind(this)

2. window.setInterval() 小坑

当定时器 window.setInterval() 在多个异步回调中使用时，就有可能在某种机率下开启多个执行队列， 所以为了保险起见，不仅应该在该清除时清除定时器，还要在每次使用之前也清除一遍 。

八、用props简单写两个对外接口

props: { initialSpeed: { type: Number, default: 30 }, initialInterval: { type: Number, default: 4 } }, data() { ...... speed: this.initialSpeed }, computed:{ interval() { return this.initialInterval * 1000 } }

然后再在相应的地方修改下就可以了。

完整的代码如下：

github地址

九、结语

After I finished writing this component, I found that there are still many places that can be optimized. This.distance and this.currentIndex are highly coupled and can be connected through calculated properties. There is also a transition method. The timer method is still a bit stiff and does not take advantage of Vue. However, the first component has been written, and it took a lot of effort.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Singleton encapsulation of addition, deletion, modification and checking

JS imitation of Toutiao mobile home page interface

Detailed explanation of the scope and pre-parsing of js

The above is the detailed content of Vue creates image carousel. For more information, please follow other related articles on the PHP Chinese website!