课程简介:
今天我们再开始一个新的组件,我们这个组件叫做轮播组件,这个大家一般都见过,就是跑马灯,简称跑马灯,有个东西不停在那跑,然后你每次可以看到这个不同的。
我在讲这个轮播组件之前说个笑话,就是为什么会有轮播这种东西?曾经有一个广告公司,他收了三个大明星的这个,三个明星公司的钱,然后要给这三个明星打广告,但是这三个明星要求我们都不能在对方的后面出现。比如说这三个明星分别是A、B、C,a说我比这BC大牌,我不能出现在后面,然后b说我比这个aC大牌,我不能出现在后面,所以说我比这个ab大牌,我不能出现后面,那怎么办?那这就搞个跑马灯,大概是这么一个样子,这是个圆筒,这个圆筒然后我们把广告旋转着贴在这上面,它们分别是a、b、c,那广告怎么打?就这个圆筒不停的转,就像发廊面前的那个转的东西一样,不停的转,这样的话谁也不知道谁是第一个,谁也不知道谁是第二个,谁也不知道这是第三个。所以对于那种非常喜欢撕逼的客户,我们用轮播来解决他的问题。
轮播还有一个好处,就是你可以在一个广告位上卖很多钱,比如说淘宝的首页是不是有个轮播?那你知道淘宝首页,如果你想上那个轮播,当然你也上不了,当然你上不了,一般它是官方的,像这种广告位特别重要的,但是你又想多卖一点钱,你就能不这里,这个广告是不是很重要?每个人一来就会看这里,下面这个都没有这个重要。
这个轮播目前还有一个特点,就是当你,当你到第五位的时候,你再往下要回到第一位,这是最难的一个点。轮播最难的一个点就是第五位到第一位还要是这样变。
那先这样看,如果第五位到这样到第一位,你看就不是这样的,你看从第五位跳到第一位有两种方式:
第一种是按这里;
第二种是直接点这个点,它的动画是不一样的。
这是我们难点,其他的没有任何难点,所以轮播是一个很好设计的一个组件,我们在讲轮播之前,我们需要讲一下动画,所以我们接下来专门研究一下Vue的动画,这是一个独立的内容选择,GS订,之前我曾经研究过动画,但是都是因为没有从最基础的开始讲,然后有很多同学看着比较模糊,然后自己有的时候也会弄错,所以我们从最基础的开始讲,我的数据,我看找一个view,因为它引入了二点,我们现在是2.5.177%。
我们需要做动画,首先我们到view的动画章节一个的搞清楚,把这些都关掉,把需要的固定一下,能把不需要的都关掉,关闭其他,只剩下需要的。
课程截图:
课程目录:
1课前水平自测1问卷
10简单轮子:Tab组件8视频1文章
11简单轮子:Popover组件4视频
12简单轮子:手风琴组件4视频1问卷
13阶段性总结4视频1文章1问卷
14中级轮子:省市区级联选择组件9视频1文章
15中级轮子:省市区级联选择组件(下)&构建工具升级6视频
16Vue动画原理6视频
17中级轮子:无缝轮播组件10视频
18中级轮子:Nav组件6视频
19测试框架改造:使用Karmag1视频
2课程概览5视频1文章2问卷
20表单验证3视频
3UI设计3视频1文章1问卷
4框架搭建(上)5视频1文章1问卷
5框架搭建(下)5视频3文章1问卷
6简单轮子:文本输入框6视频1问卷
7简单轮子:网格系统8视频1文章
8简单轮子:默认布局2视频
9简单轮子:Toast组件6视频
VueUI框架-进阶版
01.测一测你的JavaScript、Vue基础
02.课程介绍
03.体验、交互、sketch
04.框架雏形、单元测试、Mock数据
05.单元测试、自动化测试、持续集成、NPM发布包
06.省市区级联选择组件(上)
07.省市区级联选择组件(下)
08.深入讲解Vue动画原理
09.无缝轮播组件
10.Nav组件
11.使用Karma做测试
12.表单验证
13.分页组件
14.Table组件
15.图片上传组件(单文件)
16.中级轮子:图片上传组件(多文件)
17.中级轮子:图片上传的单元测试
18.Sticky组件
19.课程总结
VueUI框架-高级版
01.测一测你的JavaScript、Vue基础
02.课程介绍
03.体验、交互、sketch
04.框架雏形、单元测试、Mock数据
05.单元测试、自动化测试、持续集成、NPM发布包
06.测试覆盖率
07.升级的table组件