00:00
来啊OK,我把之前那个再来打开一下。好,咱们是不是得做下面轮播图了是吧?OK,好,嗯,这个轮播图来找组件。好,下面是不是有个轮播是吧,它这个轮播是不是自动轮播的。嗯。是是自动轮播吧,你要看一个轮播的话,你要看那几样东西,第一个是不是自动轮播,其实他是不是。无缝的。会不会循环嘛。啊,转到最后一张是不是要去第一章呢?啊,这是要评判一个轮播干嘛,它一个功能的两点,第一个是否自动轮播,第二个是否无缝,能没有讲好,那这是我们PC3这个轮播吧,你发现你自己用原生写轮播的话,可以去把GS的基础啊,从头到尾过一遍是吧?啊我们之后做移动端的时候,上来第一件事情也是做录播啊,可是我们取了一个逼格更高更高的名字叫无缝花屏。
01:15
啊,不叫轮播啊,以后出去也不要说轮播说无缝滑屏啊,因为在移动端不一样,在PC端的话,它自己播吧,移动端得拿手滑呢。是不是,然后你手指离开的时候它还得动的,是不是逻辑还是很复杂的啊,这个我们再来看这个东西,好,那首先我们来看用做PC的轮播,那其实比较简单,大家看是不是这两边有按钮啊,有按钮就应该想到什么。啊,对啊,可是这里面两个尖尖,你应该想到什么?啊,自己图标肯定肯定肯定是自己投标嘛,是不是,那我是不是得把这个字体拿过来。我们还没有字体吧,我们看如果我们不写字体库,它会不会出问题,好来看一下我们是不是得找轮播图啊。
02:00
你也有找到轮播图吗?啊,在这个组件里面,你是压根找不到过度的,因为这个组件里面东西都是比较静态的。懂吗?就是一些框懂不懂OK,那你想找轮波图应该在哪找G的插件,只你好看最底下是不是有个叫卡是吧?来看一下。OK是不是,就他是不是怎么办。CTRLV是不是我们说什么,这叫轮播。CTRLB是不是啊,人生一大快事,走你。OK,结构调整好是不是这样的?OK,来看一下页面吧。好,轮廓就出来了,爽不爽?来看一下这里。啊,轮播在不在在啊,样式得调,瞧首先两个尖尖没有吧,为什么没有进尖啊,你连字体都没拿过来,哪来自己图标是吧,首先得去拿什么。
03:06
字体得拎过来,图片也得拎过来,CTRLC。CTRL是不是啊,那还是需要你自己去干嘛,写点东西的,走,你看两个机械是就过来啊,它百分百用的是一个自己的图标嘛,其实你在这个上面是在一个A标签上面写个class就行了,就上来了吧,咱们之前也玩过吧,是不是OK,来看看是不是里面插图啊,看图它是放哪个,首先来看这个轮波这个结构啊,最外层是不是有个容器,是不是啊,OK啊,记住以后看到data杠的东西你们应该学过。是不是我的H5里面是有API,直接拿这个属性的。没有是吧?啊没有,那我们最后再来讲,那记住跟data杠有关的都是我JS要去获取懂吗?啊是在不里面跟D杠有关的东西都是JS一些标志位啊,就是我JS要拿这个标志位来做东西的啊,如果你没有这个东西,它肯定是不会去轮播的,一旦你写了这个属性,他就要去轮播了。
04:08
有吗?OK,我们来看一下,比如说你看我没有这个铁,它是一个什么鬼?保存一下。你看我是不是点一下动一下自动能播吗。自动自动自动1234511还是自动的嘛,是不是,我们再来看这个属性到底是来干嘛,OK来看一下,首先它最外层是不是有一个容器啊,里面OL一看就是一个小圆点,它应该有小圆点的,只不过咱们现在看不到,因为我们后面是白的吧,是不是?OK,这个应该放每个面的。是吧,底下两个不就是按钮吗?是吧,你看为什么我说它这个图标字体啊。你们看到这个这个玩意跟你看这个玩意是不是G开头的,来看一下,来看我们这个全局样式里面。上来哎,不对,应该是起步啊,不对,应该是组键啊,一开始你看G的什么自己坐标吗。
05:07
全部在这吧。是不是啊,我们早上不就有两个箭头吗。两个镜头有没有看?就是他们俩嘛,是不是把这个class给他写上去,是不是就出来了,你看它这边是不是也就写这个class。懂吗?你看这个间段是不是出来了,给一个SPA是不是就有了,能不能理解啊,OK,那我们来看一下,其实我们在这一块的话,我们是不是得这个两个,我们上面是小圆点,下面是两个箭头。是吧,那当中这些内容应该是有地方需要放图片的,果然这种是吧?啊,这省略号进去了,OK,现在我们是不是先放两张是吧?叫艾特玛image来找一下,当时是给了我们点点点啊image底下什么。啊,因为这是轮播,我们找big的是吧,先找pro是吧,好这里。好,底下是一些文本的描述嘛,咱们先不管来看一下啊,比如说我写个一一啊,这边我写个二二,看到最后炫炫到哪边去啊,这个就干掉,你就不要了。
06:09
OK,走你image底下的什么,一个是Chrome,还有一个是firefox啊,找找他们的大图好看一下。诶是不是上来了,你看是不是就过来了,可这个图太大了吧,你看这个意是不是就什么文本信息啊,你看是不是还看到小圆点了。是吧,那没讲,我们看这个轮播,我们总共有几张。五张吧,那应有几个小娘,五个小点咋整啊?就就咋整就就就可以了,五个小圆点就出来了,这个I层结构应该有几个五个,而且看一下我们这个东西的当中有没有任何内容吧,那其实我们什么没有任何内容的话,是不是这一块文本就可以给他干掉了,要不咱们去搜一个嘛,先点内容吧啊,比如说这个什么这是CH,这个什么fire。
07:05
CTRL,我们应该有几个塔?五个是不是来345OK还有吗。吧是吧,OK,还有呢,Open找open op open是吧,OKCC完毕,还有什么IE?加一嘛,是不是好,Ctrl c ctrl b OK,大家看一下。刷一下全部全部在这边嘛,是不是走你走你走,你这个图是不是都不是一样大的是不是,那我们最好是把这个,我们说我们做的是一个响应识的东西啊,那我们说其实我们的图片都应该是响应识图片,怎么样它变成响应识的全局的图片,全要响应时。跟着我的容器走呗,他会自适应的嘛,懂吗?这个样子,这个样子自己想懂吗?因为这个里面没有说让图片去准吗?想意思到没讲啊,走你刷一下。
08:08
OK,那我们来看一下,现在大家看上面是不是有空隙啊,咱们先不管,咱们先把这个什么,我们说现在我们是不是这个太大了,你们来看我们这个页面里面是不是干嘛只看到一半的到logo这一块的,那应该咋整啊,我们说我们的容器是不是太大了。是不是这个容这个容器太大了,是不是,那我们是不是最好应该去改一改。是不是把这个容器的高度控一控嘛,因为现在是不是我们默认这个容器是靠我们图片撑开来的,是不是我们不希望给它靠图片撑开来的,那这个样式只能自己加,懂吗?那怎么办?我们说一般你不要动它的class自己去加。加一个有个性的达母当轮播吗?懂吗?因为你改它样式的话,可能会把它的一些覆盖掉,这样就不好了,懂吗?OK,这。
09:00
CTRLC点吗?是不是我说你的高度稍微的低一点,给个500。首个L。哎,肯定变小了,溢出的嘛,下面怎么办?哦,不是,是不是所前一个月学的东西还是。有用的,哎,是不是就过来了。是不是就过来了,可是我们发现这些文本就没了,而且这个文本我感觉好丑啊,我看这个有没有给我们提供组件,可以去搞一些文本。全局样式里面有没有。呃,跟我们这个。咱们不管这个图片吧,啊,这边可以变成响应式的图片吗?咱不管它,嗯,我们想想。有没有什么辅助类啊?那个。
10:05
嗯。我觉得他的P标签应该也是带钥匙的,就直接放一个P标签进来吧,看一下行不行。好,都放一个皮标签,不然我感觉有点丑,哎,他好像是应该是个标题吧。是不是给给我们给他HR是不是更好一点,是不是啊,我们说一个一个站点里面这个HR标签是不是可以有多个的。是吧,爱奇艺是不是只能有一个是吧,OK,好,这你。OKCRCCCCC啊,这个就是什么提力活了。CTRLCCTRLV啊,以后去公司都是体力,CTRLCCTRLVCTRLS啊来看看。
11:03
保存起来是不是还是没看到这个结果,这个结果好像没了。咱们先看看一下这个结构在哪。轮播嘛,是不是。轮播里面的什么D这块吧,每一个item底下的。这款内容吗,是不是。这块内容。诶,有的吧。是不是有了这移动端吧,屏大点是不是没了。哎,平台你是不是会出去的,是不是我们来看它应该控制什么。嗯。
12:00
Right left控制了right跟怎么控制right和left?博腾是不是才20PX啊?是不是啊,那这个东西的话是不是写被写死了,是不是我们说这个波程最好是个百分比啊。是一个百分比好稍微的好一点。想想百分比的话,确实应该写一个百分比。是吧,那这个样式是不是咱们可以干嘛给它覆盖一下。CTRL什么C。拎过来。那这个样子给它稍微的覆盖一下,我们说它里面的什么。波特vot波干嘛?我们说20%,看看在哪。20%还是没有是吧,那就40%能不能上来二十百分之四十啊,温柔一点的来看一下,50%应该要上来了。
13:00
是不是OK,跑到移动端看一下。你懂吗?响应是嘛,真的是,是不是来干嘛?当这个明外干嘛768的时候。因为这个这个代表什么大于等于768了max是不是啊,OK,让这个波程干嘛TCTRLC啊就干嘛不管了,就20PX嘛,是不是一本原来不就是20PX嘛,这个你算一下啊,是不是过了。看。IPHONE12。按哪个按钮,你。这不是,这是因为我整个高度不是想一时的,是不是,那把高度也是想想一时吧,CTRLC嘛,是吧,进了它应该是什么。
14:10
Over hand是不是都可以的,那高度变成200了是不是走你说一下。差不多吧,是不是哇,好准呐啊稍微有一点吧,这个这个其实就不会出现什么这么小的屏幕了吧,其实应该我们去什么。移动要看一下这个欧鹏有点,其实在这一块的话,其实这个字体应该干嘛。这个里面的字体是不是应该变小一点,我们就不做那么细了好不好啊,把这个拎上来一点啊,看一下走你。只有你有你,只有你虎为什么提的那么少?图片有问题?
15:01
那我这是20%是啊,对,我是相当于什么?哎,我这20%相当于容器,哦不对,我这到移动端底下是不是不是百分比了,那搞个百分比啊,5%吗?应该相当于什么容。融起来了吧。每章鱼。为什么会参照图片来?不应该占到图片了啊,因为我。我是让谁定位了,刚刚这个东西嘛,它的定位应该称作什么。他的定位没穿到阳台湾。它的定位相当于谁了?相对于他了吧,它是相对定位的嘛,是吧,艾特没有相对定位嘛。艾特有没有定位?你点一下这个,它那个现在的钥匙是5%。对啊,我知道5%啊,咋啦。涨了5%啊。
16:00
5%。不一样。我也不知道为啥不样,不是不是不是不是在调吗?现在是吧,OK,你看这个D是不是在这边是吧,5%来看一下。这个div没了啊,这个div在这。是吧?是不是在这?点一个单独调。是吧,那太烦了,给每个条条,那我们得写到什么时候。位置都是正的吧,一样的吧,位置都一样的吧,文本不一样吧,里面的是不是。文本位置有问题,跟这张图片有关系啊,图片的大小不一样吗?是不是啊,图片大小不一样,不是我让他定位了吗?可是他现在还是根据他定位的话,怎么可能啊,他定位应该根据他来啊。
17:03
是不是应该根据他来嘛,他是相对定位的嘛,因为我们现在是不是他是定位的,它定位你看找到负极第一层有没有定位啊。哦,有it也是定位的吧,是不是it的宽度看是不是不一样,It是凹凸凹凸的吧,那就那就有问题了,是不是,那我们是不是应该让这个艾干嘛。二层的宽高是不是也得给它空一框,不然他们的宽高是不一样是吧,那怎么办?那就这边再来一个吧,干嘛让这个容器跟这个艾特一样大的,是不是OK,有点卡。再看看是不是我们这个item。那这个item不一样吧,容器都是一样的嘛,是不是这个item有问题啊,一个大一个小。我果姑这么大,Cream cream比他大吧?
18:03
是不是OK,那怎么办?啊,根据图片来了,是不是我们把这个X的括号给它定死是不是就行了啊。OK,我们说这边呢,我加一个什么,它底下的什么。底下的点item,这能不能理解啊,那就是调它样式的时候,我们需要加的东西。OK,那干嘛?这里面是不是也得改改。是不是,所以你再来看一下。说一下。嗯。414258。2232吧,高度不一样吧,啊是高度比我诶那我改的是高度啊。
19:02
未生效。点底下这个item。达在哪?当五杠cross it。好像样式没有被运用上吧?来看一下吧,这个宽度高度为多少,看这个高它的高度在哪?我当时没有用上。哎。这是他自己的一个。样式是不是我这个没有用,没有用上。选择。你就不管了,直接干嘛杠PTPTT,好,来看一下。不是揍你。咦,火狐怎么还没动啊?是不?我压根都没有用上。
20:11
改图片的大小,图片的尺寸。不对劲啊,那我这么改应该是可以的,选择选错了。哦哦哦哦哦哦哦哦哦,这边是不是还有一个,哦哦对对对,就干掉他吧,是不是,可是这么走的话,看他底下应该没有其他爱情了吧。啊,这个干嘛啊,这个重要生命也不要乱用,是不是没有办法的时候用用。差不多了,是不是OK,这这回差不多了吧,是不是这个不改了啊咦。最外面的时候怎么没了?
21:02
日了,不不,什么鬼啊,这一开始这个波太小了呗。上啊去了。啊啊啊哎,完了这个这个视频待会重录,OK好来看一下,好这里啊,这个是不是调整样式还蛮就是蛮复杂的,不是蛮复杂,就是其实不难,是不是就是得小心点嘛,那再来看一下,大家看这这个是不是干嘛。这个有缝啊,啊,其实其实这个东西应该是一个。你看我滚动滚动它时,它干嘛固定定位的吧,其实这个时候我们它不是固定定位嘛,因为我们啥啥都没给他设置嘛,是不是那看一下那怎么去做固定定位。上那找吧,是吧,组建里面谁啊。导航条呗,固定在顶部加什么刚拓加个泪水就固定在顶部了吧,好神奇啊,看一下。
22:10
给谁啊,给导航加进就可了是吧,OK,肯大看现在因为你定位的话,那我这个内容肯定看会挡住一点,肯定会挡住一点的,那他得下来吧是吧,他得有个马马看他的高度会段。它的高度,诶你你怎么知道是50好走你来看看来来看一下走你那是不是给他去要加样式了,那怎么办?你看我这边是不是加了一个达姆杠,Cos什么时候加。啊,我刚加的是吧。那个嘛,CTRLC干嘛。有一个什么马什么top吧,50PX码是吧,只有你啊,你现在应该是看完整了吧,啊,比如说我把它搞透明了。
23:05
看一下。他有背景啊。BA。OBOK是不是干嘛正好的,是不是去移动的看是不是也是一样的,是不是OK把这个出来,哎,这是没有没有任何电价题的啊,这个样式应该也有点统一了吧,好然后我们再来看,好现在我们来看什么,现在把它关了啊,关了再看。然不是,是不是没太大问题了是吧,可是有时候我可能希望去控制一下它的什么速度,这个速度太慢了,自动人工速度太慢了。1234差不多五秒是吧,太慢了吧,下我我想他快点是吧,那怎么办?看文档嘛是吧,上面肯定有介绍的,找到是不是轮播这块啊,我们刚刚是不是只把这个结构给贴了过来啊,看它底下。
24:12
走你啊,因为我看过是不是有一个参数啊。看我不行是吧。是不是啊,他说你用这个的话,必须加个加个什么。对伽嘛,相当于这些东西就是给GS来读的,有没有讲,那比如说这个什么,一看就应该知道是干嘛,默认是五秒。轮播的一个速度嘛,是不是就你干嘛,我们给他用用。给谁啊?轮播呗,是不是这边干嘛,我们说data什么杠这个玩意吧,等于多少。五秒我们是不是把它,看它应该怎么样的一个写法,那么类型吧,是不是啊,OK,只有你干嘛,我们换成一秒是吧,看行不行。
25:03
说下。一秒一秒一秒一秒吧,是不是因为他是去读这个属性的嘛,懂吧,OK,所以你再再看看还有什么。啊,其实你看后面英文就知道了啊,这个代表什么,代表你喝上去就可以让它暂停。是吧,OK,那我看默认就是后吧,其实我们说默认值就是后吧,那我后不上去,他应该停下来吧。一走鸟。真的停下来的是吧,其实其实是其实就其实是因为什么,其实是你因为有有这个属性嘛,你你可以闲闹吧,闲道代表什么意思啊。不停的我们试一试嘛,叫什么。Data在干什么?叫什么什么鬼,暂不暂停吗,是不是?好比如说我们等于那来看一下这里。
26:03
刷一下。这样动真没讲OK,我们说还是把它改成。默认的后吧是吧,OK,你看这个智不智呢?哎,我们以后写的轮廓度也是这么智能的啊,可是你得发现我们说调用的时候简单是因为你封装的时候。啊,封装的很麻烦,是不是考虑的东西越来越多了,所以其实你在这边现在外面用的很少,说明人家组件里面写的很通用,懂吗?写的很动态好,再来看还有什么。外决定这个轮播器是否循环,什么意思啊。他是否无缝,本是不是OK,也叫什么杠。外。B耶,什么鬼,吓我一跳。好,CTRLC为的时候看一下TT吧,是不是去是默认则为的时候肯定是要。
27:03
无缝的走,你一张两张三张四张回来是不是OK,把它设置成。Za。一张两张,三张四张停。是不是OK,这是用了对嘛,对杠外派来控制是吧,那还是要。或认者是吧,好,这是一种方式,我们是通过什么,通过给他把这个这叫自定义属性吧,是吧,OK,那还有什么方式呢?直接可以通过什么解块啊,有没说我没说不是里面的所有的差件都是积块,对不对,OK,我们用这块应该怎么用多了是不是核心函数啊,核心函数里面是不是干嘛来个方个想,是不是相当于温度零度的吧,是不是,OK怎么办?我们来看一下。文档上面有没有介绍?也有,你看CTRLC。CTRLV是不是给这个方法去设置一些参数啊,就变成两秒八啊,当然当然这边是还有一个keyboard的啊,原来的话是可以通过这个键盘上面左右这两个键去控制这个轮播的,懂不懂,那现在这个属性已经不起作用了。
28:11
啊,就是你们不要去测它了,来看一下,现在我们说。来看是不是里面可以把这些东西全部写,全部干嘛写进来了是不是OK,你说干嘛走你我们说让你干嘛上来喂闹嘛是吧,还有什么。为什么?Force嘛,因为这里面是个对象嘛,最后不要最后不要有逗号了吧。能理解吗?来看一下行不行?OK,放上去应该还是轮播的,是不是,等你到最后一张应该不应该不会回去了,是不是啊,有没有起作用,它也它也起作用了吧,来看还给我们提供了什么。
29:00
在干嘛,是不是一个方法,这个方法干嘛。From从左到右修,让他去干嘛再去干嘛。无缝呗,现在咱们是不是不是无缝的,你调这个方法,它就能再取无缝呗。是不是这样的,那怎么办?比如说我们写个事件嘛。嗯,怎么写呢,比如说我底下来个按钮啊,我们测试一下那个A标签啊,那个按钮。就叫stt star是不是好,给这个按钮我们去绑,绑定一些属性,然后给个ID叫test,只来看这个test,好CTRLC写到这个里面来吧,是不是好,这我们说这块里面四大特征是什么。记不记得第一个什么啊?记得一个链式调用,OK,读写二合一,是不是也叫取负值合体一样的读写?
30:01
二合一还有什么影视迭代?影视迭代有什么?还有什么啊,还有叫编码函数化,是不是函数化编程么?懂吗?你们永远都看不到什么一个对象点属性是什么,全部通过什么方形来做吧,是不是这样的,OK,那么再来看,那现在是不是我说找到这个按钮。好,怎么找到这个按钮,有ID吗?是吧,找到这个按钮。CTRLC,我说你在怎么给他去绑定事件。点KD的时候吧,ok.ckkd的是候里面是不是传一个方格形是吧,比如说这个方格选完你干嘛呢?点击的时候是不是干嘛让你继续学呀。
31:01
无缝。是不是啊,比如说我再来个按钮。叫TEST2啊,我就要让你暂停是不是,OK,这叫TEST2,只有你,那我们是不是可以再来写一个啊,比如说什么TEST2是不是怎方它暂停啊,啊,你看这边把它暂停。啊,下面这个是指定去哪一张,这是往前是往后,这我就不撤了,对吧,我看能不能再暂停。我这么写行吗?啊,前面都有东西掉吧。你这个轮播容器得去调吧。是不是好走,你你看这个class肯定是我什么轮播的class啊。看到没有,是不是是不是轮波最最外层那个容器啊,走你。说一下。走,看他是不是无缝的。不是风的吧,开启风行不行?
32:02
不动了。开启,哎,这个是什么鬼?圈的那个默认组。A标签井号点上去。Java s CR PT是吧,冒号分号S。好,CTRLCCTRLVCTRL这里看一下。暂停。停住了吧,继续。是不是可以看他是不是无缝。
33:00
哎,不对啊,你看看是不是这个让他继续去转,这个让它什么暂停下来,继续让它从左往从从左往右嘛,好像不能控制无缝嘛,是吧,OK,这里好,那这是他提供出来的接口吧。懂吧,OKHT干掉它,好,那这个轮播我们也差不多了是吧?当然这轮播上还有两个事件。啊,这个事件是在我这个轮播动画开始的时候触发一次,这个是在我轮播动画结束的时候触发一次,对吧?好,还有两个事件,那到这一块其实已经差不多了,对不对?好,下面这个是关于另外一个组件,关于浮动的啊关于什么,就是你有这个,你有这个东西的话,其实相当于是去。来看一下,相当于是去固定定位的懂吗?啊,这个我们之后用到了,我们再来看啊,里面的东西都比较什么好用的,就是干嘛掉下它的API应该可以的,懂不懂OK,那这是我们说什么。那轮播是不是也完了,F12。刷一下。只有你是不是也完了,OK,那紧接着是不是要做下面什么。
34:03
这个三个tap了是吧,OK。
我来说两句