对于那些不需要路由的内部组件,在切换的时候希望增加一个轮播过渡的效果,效果如下:
我们可以引入一个轮播组件,但是有个问题,通常轮播组件都会把所有的slide都渲染出来再进行切换,这样就导致所有的资源都会触发加载,这可能不是我们所期待的,毕竟如果slide比较多的情况需要一次性加载的图片等资源太多了。所以我们可以手动简单地写一个,满足需求即可。
现在一步步来实现这个功能,先写一个实现基本切换的demo.
1. 实现切换
先用vue-cli搭建一个工程脚手架,使用以下命令:
这样就搭了一个webpack + vue的工程,进入slide-demo目录,查看src/App.vue,这个文件是初始化工具提供的,是整个页面的组件。还有一个src/components目录,这个是放子组件的目录。
在这个目录里面新建3个组件:task-1.vue、task-2.vue、task-3.vue,然后在App.vue里面import进来,如下App.vue所示:
export default {
name: 'App',components: {
Task1,Task2,Task3
}
}
我们的数据格式questions是这样的:
[{index: 1,type: 1,content: ''},{index: 2, {index: 3,type: 2,{index: 4,type: 3,content: ''}]
它是一个数组,数组里的每个元素代表每道题,每道题都有一个类型,如选择题、填空题、判断题等,分别对应上面的task-1、task-2、task-3,我们用一个currentIndex变量表示当前是在哪道题,初始化为0,如下代码所示(添加到App.vue里面):
通过改变currentIndex的值,从而切到一下题即下一个组件,要怎么实现这个切换的效果呢?
可以使用Vue自定义的一个全局组件component,给合它的is属性,达到动态改变组件的目的,如下代码所示: