|
|
|
|
移动端
创建专栏

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

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

作者:会编程的银猪|2018-04-16 14:39

技术沙龙 | 6月30日与多位专家探讨技术高速发展下如何应对运维新挑战!


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

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

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

1. 实现切换

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

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

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

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

  1. <script> 
  2. // import HelloWorld from './components/HelloWorld' 
  3. import Task1 from "./components/task-1"
  4. import Task2 from "./components/task-2"
  5. import Task3 from "./components/task-3"
  6.   
  7. export default { 
  8.     name'App'
  9.     components: { 
  10.         Task1, 
  11.         Task2, 
  12.         Task3 
  13.     } 
  14. </script> 

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

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

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

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

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

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

  1. <template> 
  2. <div id="app"
  3.     <div class="task-container"
  4.         <component :is="'task-' + questions[currentIndex].type"  
  5.         </component> 
  6.     </div> 
  7. </div> 
  8. </template> 

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

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

  1. <template> 
  2. <div id="app"
  3.     <div class="task-container"
  4.         <component :is="'task-' + questions[currentIndex].type"  
  5.             :question="questions[currentIndex]"></component> 
  6.         <button class="next-question" @click="nextQuestion">下一题</button> 
  7.     </div> 
  8. </div> 
  9. </template> 

响应函数nextQuestion实现如下:

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

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

  1. <template> 
  2. <section
  3.     <h2>{{question.index}}. 选择题</h2> 
  4.     <div>{{content}}</div> 
  5. </section
  6. </template> 
  7. <script> 
  8. export default { 
  9.     props: ["question"
  10. </script> 

最后的效果如下(加上题目内容):

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%),如下代码所示:

  1. <template> 
  2. <div id="app"
  3.     <div class="task-container"
  4.         <component :is="'task-' + questions[currentIndex].type"  
  5.             ></component> 
  6.         <component :is="'task-' + questions[currentIndex + 1].type"  
  7.             class="next-task"></component> 
  8.     </div> 
  9. </div> 
  10. </template> 
  11.   
  12. <style> 
  13. .next-task { 
  14.     display: none; 
  15.     transform: translateX(100%); 
  16.     /* 添加一个动画,当改变transform的值时就会触发这个动画 */ 
  17.     transition: transform 0.5s ease; 
  18. </style> 

上面代码把具有.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的奇偶性切换。

如下代码所示:

  1. <template> 
  2. <div id="app"
  3.     <div class="task-container"
  4.         <component :is="'task-' + questions[evenIndex].type"  
  5.             :class="{'next-task': nextIndex === evenIndex}" 
  6.             ref="evenTask"></component> 
  7.         <component :is="'task-' + questions[oddIndex].type"  
  8.             :class="{'next-task': nextIndex === oddIndex} 
  9.             ref="oddTask"></component> 
  10.     </div> 
  11. </div> 
  12. </template> 
  13.   
  14. <script> 
  15.   
  16. export default { 
  17.     name'App'
  18.     data() { 
  19.         return { 
  20.             currentIndex: 0, // 当前显示的index 
  21.             nextIndex: 1,    // 表示下一张index,值为currentIndex + 1 
  22.             evenIndex: 0,    // 偶数的index,值为currentIndex或者是currentIndex + 1 
  23.             oddIndex: 1      // 奇数的index,值同上 
  24.         }; 
  25.     }, 

第1个component用来显示偶数的slide,第2个是用来显示奇数的slide(分别用一个evenIndex和oddIndex代表),如果nextIndex是偶数的,那么偶数的component就会有一个next-task的类,反之则亦然。然后在下一题按钮的响应函数里面改变这几个index的值:

  1. methods: { 
  2.     nextQuestion() { 
  3.         this.currentIndex = (this.currentIndex + 1)  
  4.             % this.questions.length; 
  5.         this._slideToNext(); 
  6.     }, 
  7.     // 切到下一步的动画效果 
  8.     _slideToNext() { 
  9.   
  10.     } 

nextQuestion函数可能还有其它一些处理,在它里面调一下_slideToNext函数,这个函数的实现如下:

  1. _slideToNext() { 
  2.     // 当前slide的类型(currentIndex已经加1了,这里要反一下) 
  3.     let currentType = this.currentIndex % 2 ? "even" : "odd"
  4.         // 下一个slide的类型 
  5.         nextType =  this.currentIndex % 2 ? "odd""even"
  6.     // 获取下一个slide的dom元素 
  7.     let $nextSlide = this.$refs[`${nextType}Task`].$el; 
  8.     $nextSlide.style.display = "block"
  9.     // 把下一个slide的translate值置为0,原本是translateX(100%) 
  10.     $nextSlide.style.transform = "translateX(0)"
  11.     // 等动画结束后更新数据 
  12.     setTimeout(() => { 
  13.         this.nextIndex = (this.currentIndex + 1)  
  14.             % this.questions.length; 
  15.         // 原本的next是当前显示的slide 
  16.         this[`${nextType}Index`] = this.currentIndex; 
  17.         // 而原本的current slide要显示下下张的内容了 
  18.         this[`${currentType}Index`] = this.nextIndex; 
  19.     }, 500); 

代码把下一个slide的display改成block,并把它的translateX的值置为0,这个时候不能马上更新数据触发DOM更新,要等到下一个slide移过去的动画结束之后再开始操作,所以加了一个setTimeout,在回调里面调换nextTask的类,加到原本的current slide,并把它的内容置成下下张的内容。这些都是通过改变相应的index完成的。

这样基本上就完成了,但是我们发现一个问题,切是切过去了,就是没有动画效果。这个是因为从display: none变到display: block是没有动画的,要么改成visibility: hidden到visible,要么触发动画的操作加到$nextTick或者setTimeout 0里面,考虑到性能问题,这里使用第二种方案:

  1. $nextSlide.style.display = "block"
  2. // 这里使用setimeout,因为$nextTick有时候没有动画,非必现 
  3. setTimeout(() => { 
  4.     $nextSlide.style.transform = "translateX(0)"
  5.     // ... 
  6. }, 0); 

经过这样的处理之后,点下一题就有动画了,但是又发现一个问题,就是偶数的next-task会被盖住,因为偶数的是使用第一个component,它是会被第二个compoent盖住的,所以需要给它加一个z-index:

  1. .next-task {  
  2.     display: none; 
  3.     transform: translateX(100%); 
  4.     transition: transform 0.5s ease; 
  5.     z-index: 2; 

这个问题还比较好处理,另外一个不太好处理的问题是:动画的时间是0.5s,如果用户点下一题的速度很快在0.5s之内,上面的代码执行就会有问题,会导致数据错乱。如果每次切到下一题之后按钮初始化都是disabled,因为当前题还没答,只有答了才能变成可点状态,可以保证0.5s的时间是够的,那么就可以不用考虑这种情况。但是如果需要处理这种情况呢?

3. 解决点击过快的问题

我想到两个方法,第一个方法是用一个sliding的变量标志当前是否是在进行切换的动画,如果是的话,点击按钮的时候就直接更新数据,同时把setTimeout 0.5s的计时器清掉。这个方法可以解决数据错乱的问题,但是切换的效果没有了,或者是切换到一半的时候突然就没了,这样体验不是很好。

第二个方法是延后切换,即如果用户点击过快的时候,把这些操作排队,等着一个个做切换的动画。

我们用一个数组表示队列,如果当前已经在做滑动的动画,则入队暂不执行动画,如下代码所示:

  1. methods: { 
  2.     nextQuestion() { 
  3.         this.currentIndex = (this.currentIndex + 1)  
  4.             % this.questions.length; 
  5.         // 把currentIndex插到队首 
  6.         this.slideQueue.unshift(this.currentIndex); 
  7.         // 如果当前没有滑动,则执行滑动 
  8.         !this.sliding && this._slideToNext(); 
  9.     }, 

每次点击按钮都把待处理的currentIndex插到队列里面,如果当前已经在滑动了,则不立刻执行,否则执行滑动_slideToNext函数:

  1. _slideToNext() { 
  2.     // 取出下一个要处理的元素 
  3.     let currentIndex = this.slideQueue.pop(); 
  4.     // 下一个slide的类型 
  5.     let nextType =  currentIndex % 2 ? "odd" : "even"
  6.     let $nextSlide = this.$refs[`${nextType}Task`].$el; 
  7.     $nextSlide.style.display = "block"
  8.     setTimeout(() => { 
  9.         $nextSlide.style.transform = "translateX(0)"
  10.         this.sliding = true
  11.         setTimeout(() => { 
  12.             this._updateData(currentIndex); 
  13.             // 如果当前还有未处理的元素, 
  14.             // 则继续处理即继续滑动 
  15.             if (this.slideQueue.length) { 
  16.                 // 要等到两个component的DOM更新了 
  17.                 this.$nextTick(this._slideToNext); 
  18.             } else { 
  19.                 this.sliding = false
  20.             } 
  21.         }, 500); 
  22.     }, 0); 
  23. }, 

这个函数每次都先取出当前要处理的currentIndex,然后接下来的操作和第2点提到的一样,只是在0.5s动画结束后的异步回调里面需要判断一下,当前队列是否还有未处理的元素,如果有的话,需要继续执行_slideToNext,直到队列空了。这个执行需要挂在nextTick里面,因为需要等到两个component的DOM更新了才能操作。

这样理论上就没问题了,但实际上还是有问题,感受如下:

我们发现有些slide没有过渡效果,而且不是非必现的,没有规律。经过一番排查,发现如果把上面的nextTick改成setTimeout情况就会好一些,并且setTimeout的时间越长,就越不会出现失去过渡效果的情况。但是这个不能从根本上解决问题,这里的原因应该是Vue的自动更新DOM和transition动画不是很兼容,有可能是Vue的异步机制问题,也有可能是JS结合transition本身就有问题,但以前没有遇到过,具体没有深入排查。不管怎么样,只能放弃使用CSS的transition做动画。

如果有使用jQuery的话,可以使用jQuery的animation,如果没有的话,那么可以使用原生dom的animate函数,如下代码所示:

  1. _slideToNext(fast = false) { 
  2.     let currentIndex = this.slideQueue.pop(); 
  3.     // 下一个slide的类型 
  4.     let nextType =  currentIndex % 2 ? "odd" : "even"
  5.     // 获取下一个slide的dom元素 
  6.     let $nextSlide = this.$refs[`${nextType}Task`].$el; 
  7.     $nextSlide.style.display = "block"
  8.     this.sliding = true
  9.     // 使用原生animate函数 
  10.     $nextSlide.animate([ 
  11.         // 关键帧 
  12.         {transform: "translateX(100%)"}, 
  13.         {transform: "translateX(0)"
  14.     ], { 
  15.         duration: fast ? 200 : 500, 
  16.         iteration: 1, 
  17.         easing: "ease" 
  18.     // 返回一个Animate对象,它有一个onfinish的回调 
  19.     }).onfinish = () => { 
  20.         // 等动画结束后更新数据 
  21.         this._updateData(currentIndex); 
  22.         if (this.slideQueue.length) { 
  23.             this.$nextTick(() => { 
  24.                 this._slideToNext(true); 
  25.             }); 
  26.         } else { 
  27.             this.sliding = false
  28.         } 
  29.     }; 
  30. }, 

使用animate函数达到了和transition同样的效果,并且还有一个onfinish的动画结束回调函数。上面代码还做了一个优化,如果用户点得很快的时候,缩短过渡动画的时间,让它切得更快一点,这样看起来更自然一点。使用这样的方式,就不会出现transition的问题了。最后的效果如下:

这个体验感觉已经比较流畅了。

原生animate不兼容IE/Edge/Safari,可以装一个polyfill的库,如这个web-animation,或者使用其它一些第三方的动画库,或自己用setInterval写一个。

如果你要加上一题的按钮,支持返回上一题,那么可能需要准备3个component,中间那个用于显示,左右两边各跟着一个,准备随时切过来。具体读者可以自行尝试。

这种模式除了答题的场景,还有多封邮件预览、PPT展示等都可以用到,它除了有一个过渡的效果外,还能提前预加载下一个slide需要的图片、音频、视频等资源,并且不会像传统的轮播插件那样一下子把所有的slide都渲染了。适用于slide比较多的情况,不需要太复杂的切换动画。

【本文是51CTO专栏作者“人人网FED”的原创稿件,转载请通过51CTO联系原作者获取授权】

戳这里,看该作者更多好文

【编辑推荐】

  1. JavaScript Event Loop 机制详解与 Vue.js 中实践应用
  2. 深入 Vue2.x 的虚拟 DOM diff 原理
  3. 外媒速递:常见全栈Vue/Laravel应用性能解决综述
  4. 外媒速递:你下一个Vue.js项目中值得尝试的五款Vuex插件
  5. 五分钟掌握微信小程序轮播图
【责任编辑:武晓燕 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

热门职位+更多