Vue实现内部组件轮播切换效果

对于那些不需要路由的内部组件，在切换的时候希望增加一个轮播过渡的效果，效果如下：

创新互联2013年开创至今，是专业互联网技术服务公司，拥有项目成都网站建设、网站制作网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元道县做网站,已为上家服务,为道县各地企业和个人服务,联系电话:18982081108

我们可以引入一个轮播组件，但是有个问题，通常轮播组件都会把所有的slide都渲染出来再进行切换，这样就导致所有的资源都会触发加载，这可能不是我们所期待的，毕竟如果slide比较多的情况需要一次性加载的图片等资源太多了。所以我们可以手动简单地写一个，满足需求即可。

现在一步步来实现这个功能，先写一个实现基本切换的demo.

1. 实现切换

先用vue-cli搭建一个工程脚手架，使用以下命令：

 
 
 
 
    
  
  
  
  
  1. npm install -g vue-cli
    2. 
  
  
  
  
  2. vue init webpack slide-demo # 运行后router等都选择no
    3.

这样就搭了一个webpack + vue的工程，进入slide-demo目录，查看src/App.vue，这个文件是初始化工具提供的，是整个页面的组件。还有一个src/components目录，这个是放子组件的目录。

在这个目录里面新建3个组件：task-1.vue、task-2.vue、task-3.vue，然后在App.vue里面import进来，如下App.vue所示：

 
 
 
 
    
  
  
  
  
    2.

我们的数据格式questions是这样的：

 
 
 
 
    
  
  
  
  
  1. [{index: 1, type: 1, content: ''}, {index: 2, type: 1, content: ''}, 
    2. 
  
  
  
  
  2.  {index: 3, type: 2, content: ''}, {index: 4, type: 3, content: ''}]
    3.

它是一个数组，数组里的每个元素代表每道题，每道题都有一个类型，如选择题、填空题、判断题等，分别对应上面的task-1、task-2、task-3，我们用一个currentIndex变量表示当前是在哪道题，初始化为0，如下代码所示（添加到App.vue里面）：

 
 
 
 
    
  
  
  
  
  1. data() {
    2. 
  
  
  
  
  2.      return {
    3. 
  
  
  
  
  3.          currentIndex: 0
    4. 
  
  
  
  
  4.      };
    5. 
  
  
  
  
  5.  },
    6. 
  
  
  
  
  6.  created() {
    7. 
  
  
  
  
  7.      // 请求question数据
    8. 
  
  
  
  
  8.      this.questions = [
    9. 
  
  
  
  
  9.          {index: 1, type: 1, question: ''}, /*...*/];
    10. 
  
  
  
  
  10.  },
    11.

通过改变currentIndex的值，从而切到一下题即下一个组件，要怎么实现这个切换的效果呢？

可以使用Vue自定义的一个全局组件component，给合它的is属性，达到动态改变组件的目的，如下代码所示：

 
 
 
 
    
  
  
  
  
    2.

当currentIndex增加时，就会改变:is里面的值，依次从task-1变到task-2、task-3等，这样component就会换成相应的task组件。

接着，再添加一个切换到下一题的按钮，在这个按钮的响应函数里面改变currentIndex的值。同时把question的数据传给component：

 
 
 
 
    
  
  
  
  
    2.

响应函数nextQuestion实现如下：

 
 
 
 
    
  
  
  
  
  1. methods: {
    2. 
  
  
  
  
  2.     nextQuestion() {
    3. 
  
  
  
  
  3.         this.currentIndex = (this.currentIndex + 1) 
    4. 
  
  
  
  
  4.                % this.questions.length;
    5. 
  
  
  
  
  5.     }
    6. 
  
  
  
  
  6. },
    7.

具体每个task的实现参考如task-1.vue示例：

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
    3.

***的效果如下（加上题目内容）：

2. 添加轮播切换效果

轮播切换通常是把所有的slide都拼起来，拼成一张长长的横图，然后改变这个横图在显示容器里面的位置，如老牌jQuery插件flipsnap.js，它是把所有的slide都float: left，形成一张长图，然后改变这张长图的translate值，达到切换的目的。这个插件的缺点是没有办法从***一张切回***张，解决这个问题的方法之一是不断地移动DOM：每次切的时候都把***张移到***一张的后面，这样就实现了***一张点下一张的时候回到***张的目的，但是这样移来移去地对性能消耗比较大，不是很优雅。另外一个轮播插件jssor slider，它也是把所有的slide都渲染出来，然后每次切换的时候都动态地计算每张slide的translate的值，而不是整体长图的位置，这样就不用移动DOM节点，相对较为优雅。还有很多Vue的轮播插件的实现也是类似上面提到的方式。

不管怎么样，上面的轮播模式都不太适用于我们的场景，其中一个是这种答题的场景不需要切回上一题，每道题做完就不能回去了，更重要的一个是我们不希望一次性把所有的slide都渲染出来，这样会导致每张幻灯片里的资源都触发加载，就比如img标签虽然你把它display: none了，但是只要它的src是一个正常的url，它就会请求加载。 由于slide往往会比较多，就不使用这种轮播插件了。

还可以使用Vue自带的transition，但是transition的问题是，切下一个的时候，上一个不见了，因为被销毁了，只有下一个的动画，并且不能预加载下一个slide的资源。

所以我们手动实现一个。

我的想法是每次都准备两个slide，第1个slide是当前展示用的，第2个slide拼在它的后面，准备切过来，当第2个slide切过来之后，删掉第1个slide，然后在第2个的后面再接第3个slide，不断地重复这个过程。如果我们没有使用Vue，而是自己增删DOM，那么没什么问题，可以很任性地自己发挥。使用Vue可以怎么优雅地实现这个功能呢？

在上面一个component的基础上，再添加一个component，刚开始第1个component是当前展示的，而第2个component是拼在它右边的，当第2个切过去之后，就把第1个移到第2的后面，同时把内容改成第3个slide的内容，依此类推。使用Vue不太好动态地改DOM，但是可以借助jssor slider的思想，不移动DOM，只是改变component的translate的值。

给其中一个component套一个next-task的类，具有这个类的组件就表示它是下一张要出现的，它需要translateX(100%)，如下代码所示：

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
    4.

上面代码把具有.next-task类的component隐藏了，这样是做个优化，因为display: none的元素只会构建DOM，不会进行layout和render渲染。

所以就把问题转换成怎么在这两个component之间，切换next-task的类。一开始next-task是在第2个，当第2个切过来之后，next-task变成加在第1个上面，这样轮流交替。

进而，发现一个规律，如果currentIndex是偶数话，如o、2、4…，那么next-task是加在第2个component的，而如果currentIndex是奇数，则next-task是加在第1个component的。所以可以根据currentIndex的奇偶性切换。

如下代码所示：

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.  
    3.