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

对于那些不需要路由的内部组件，希望在切换时加入轮播转场效果。效果如下：我们可以引入一个轮播组件，但是有一个问题，通常轮播组件会在切换前渲染所有的幻灯片，这会导致所有资源触发加载。这可能不是我们所期望的。毕竟幻灯片多的话，需要一次性加载的图片等资源太多了。向上。所以我们可以简单的手动写一个来满足需求。现在一步步实现这个功能，先写一个实现基本切换的demo。这样一个webpack+vue项目就搭建好了，进入slide-demo目录，查看src/App.vue。该文件由初始化工具提供，是整个页面的组成部分。还有一个src/components目录，就是放置子组件的目录。在该目录下新建三个组件：task-1.vue、task-2.vue、task-3.vue，然后在App.vue中导入，如下App.vue所示：我们的数据格式题是这样的：[{index:1,type:1,content:''},{index:2,type:1,content:''},{index:3,type:2,content:''},{index:4,type:3,content:''}]是一个数组，数组中的每一个元素代表每一个问题，每一个问题都有一个类型，比如选择题、填空题、判断题，分别对应上面的task-1、task-2、task-3。我们使用一个currentIndex变量来表示我们当前在哪个问题，初始化为0，如下代码所示（添加到App.vue中）：data(){return{currentIndex:0};},created(){//请求问题数据this.questions=[{index:1,type:1,question:''},/*...*/];}，通过改变currentIndex的值，从而切换到下一个问题，就是下一个组件，如何实现这种切换效果呢？可以使用Vue自定义的全局组件组件，结合其is属性，达到动态改变组件的目的，如下代码所示：当currentIndex增加时，它会发生变化：is中的值从task-1变为task-2、task-3等，这样组件就会被替换成对应的任务组件，然后添加一个切换到下一题的按钮，并在这个按钮的响应函数中改变currentIndex的值。同时将问题数据传给组件：响应函数nextQuestion的实现方式如下：methods:{nextQuestion(){this.currentIndex=(this.currentIndex+1)%this.questions.length;}}，各task的实现参考如task-1.vue:<模板><部分>

{{question.index}}。选择题

***的效果是如下（加标题内容）：2.添加轮播切换效果。轮播切换通常是把所有的幻灯片放在一起形成一个长长的横图，然后改变横图显示在容器内的位置，比如老的jQuery插件flipsnap.js，就是让所有的幻灯片浮动：left来形成一张长图，然后改变这张长图的translate值，达到切换的目的。这个插件的缺点是没有办法从最后一个切换回第一个。解决这个问题的方法之一是不断移动DOM：每次切割时，将第一个移动到第一个。在页面后面，这样就达到了点击最后一页时回到第一页的目的，但是这样来回移动非常耗性能，也不是很优雅。另一个轮播插件jssorslider，也是渲染所有的slide，然后每次切换时动态计算每张slide的translate值而不是整体长图的位置，这样就不需要移动DOM节点了，这是相对优雅的。还有许多Vue轮播插件，其实现方式与上述类似。不管怎么说，上面的轮播模式都不是很适合我们的场景。其中之一就是这种答题场景不需要切换回上一题。我不想一次渲染所有幻灯片，这样会导致每张幻灯片中的资源都触发加载。比如你虽然给img标签显示：none，但是只要它的src是一个正常的url，它就会请求加载。由于幻灯片往往比较多，所以没有使用这个轮播插件。也可以使用vue自带的transition，但是transition的问题是切下一个的时候，上一个就消失了，因为被销毁了，只有下一个动画，不能获取下一个slide的资源预装。所以我们手动实现一个。我的想法是每次准备两张幻灯片。第一张幻灯片用于当前显示，第二张幻灯片放在它后面，准备剪切。剪切第二张幻灯片时，删除第一张幻灯片。幻灯片，然后在第二张幻灯片之后连接第三张幻灯片，并不断重复这个过程。如果我们不使用Vue，而是自己添加删除DOM，那是没有问题的，自己玩玩。如何使用Vue优雅的实现这个功能呢？在上述组件的基础上，再添加一个组件。一开始，当前显示的是第一个组件，第二个组件在它的右侧。当第二个被切割时，移动第一个。转到第二张幻灯片的后面，同时将内容更改为第三张幻灯片的内容，依此类推。使用Vue动态改变DOM并不容易，但是可以利用jssorslider的思想在不移动DOM的情况下改变组件translate值的值。为其中一个组件设置下一个任务类别。具有此类的组件意味着它将在下一个出现。它需要translateX(100%)，如下代码所示：上面的代码隐藏了带有.next-task类的组件，这是一种优化，因为display:none的元素只会构建DOM，不会进行layout和render渲染。于是将问题转化为如何在这两个组件之间切换下一个任务类。一开始，下一个任务在第二个任务上。当第二个任务被切断时，下一个任务会添加到第一个任务之上，这样它就会交替进行。进一步发现一个规则，如果currentIndex是偶数，比如o,2,4...，那么next-task就加入到第二个组件中，如果currentIndex是奇数，那么next-任务被添加到第一个组件中。所以可以根据currentIndex的奇偶性来切换。如以下代码所示：