00:00
好的,我们继续啊,那上一节课呢,我们讲完这个自定义组件了,那这节课呢,我们继续去把这个排行榜,我们下面这块区域呢,给它写完。那首先呢,来到我写好这个项目,大家看一下啊,先不管别的,你看我在这儿翻动的时候啊,这也是一个有交互功能,也是能滑动的一个啊区域。那这个时候呢,我们上边呢,已经接触过了龙波图wa,包括这个sc view滑动,哎。那如果说让让大家自己选的话。你们觉得应该用哪一个?对吧。好好看,注意啊,在下边我这一划一次只能划一平,而上边我们用过的龙波图的那一次就是一瓶。而view的话,如果你滑的快的话,它是能滑好几个板块的,对吧,所以这里呢,咱们应该选择用什么,用我们的sper好的,那这个时候呢,来到咱的代码,那自定义组组件这一块呢,我就给它关掉了。
01:04
哎,来到代码内容去这,那接下来呢,我们该是用这个S去写sper里面的每一项呢,应该是sper h呗。好,那么在这里。呃。总的基调我们定了以后呢,那那现在呢,因为呃,我们上边是不是还有外per呀,所以呢,上来我这儿呢,就给他定一个啊top的spaper就是跟我们最上面这个,哎给它区分开,OK,那这是这个,那在这个里边有啥啊,我们看一下我写好这个。首先这有一个标题,那么下面呢,是一个音乐的列表。对吧,啊,那这个音乐列表的话,其实写一个就够了,因为剩下的是循环病例出来。那也就是说我们应该先整一个标题啊,云音乐热钢热胳膊对不对,来在这儿呢,我们来一个title啊写我先写此一个数据啊,待会呢,我们去给他啊写活了云音乐啊热胳膊。
02:03
OK,那就是这个。那么下边的话呢,对应有一个列表,那这呢,这个列表呢,是针对于我们的音乐的,所以呢,我叫他music item。那最终这个应该也应该是便利出来的。那这个music呢?呃,里边有啥呀,一张图,一个序号,一个文本,然后水平排列对不对,那现在呢,我们先去写它的结构啊,Image s RC static下边image下边啊,女神点GPG啊,在没有动态图的时候,我都用这一张。来代替。呃,再往下呢,应该是一个序号对不对,所以呢,我这儿呢,直接给他一个count吧,就序号或者叫order都可以啊来,那这呢,先写写一个叫E,那再往下呢,是一个歌名,歌名的话呢,就是music啊,Name啊,音乐的名称呗。
03:03
没问题,呃,在这个里边呢,我们叫它什么呀,比如说我们叫我先随便写一个吧,比如说光辉岁月。光辉岁月,OK,那这是一个啊,这是一个。然后呢,对应的music item呢,我们先给它放个。三个呗,啊,比如这个序号为二对吧,那这儿呢,再换一个叫海阔天空,哎,海阔天空,那这个序号改成三啊,再来一个吧,主要真的爱你。啊,那如果是这三首歌啊,大家都知道的,应该知道啊,我我想要说明这是谁唱的。嗯。OK,那就是这个啊,那现在呢,这是一么,注意我们现在呢,因为要看效果,我就先选择三个呗,内容呢,看上去有点多啊有点多。啊,能看到我怎么操作。首先这是一个SEM。
04:00
X法item,然后因为我们滑块的话,是不是需要有多个呀,所以我呢,先手动的去给它复制一个。那待会呢,要控制它的样式呢,注意啊,那或者这样我先改一下吧,我在这儿呢,去给大家写一个,那这个呢,就叫它swaor h,注意啊,我加了一个包裹器。哎,那这样的话呢,相当于里面是个整体啊,整体里面呢,又有很多个体。来,那这个时候我们复制几分啊三。好了,那现在呢,有三个外H码,那来到咱的项目看一下打卡。可以划到了没有问题,那接下来我们去写一下它的样式啊,首先呢,先写一下这个标题的啊,标题的来。呃,打开我们对应的钥匙啊,把这个呢,我就收起来了。嗯,来到这儿,那为了方便大家观看的话呢,啊,那这个时候呢,我会选择先把这个啊移到右侧去啊,跟这个对应的去写。
05:00
对吧,那在这儿呢,来。移到上面,呃,我们应该跟这对应啊,首先呢,我们先去设置这个swaer item里面的什么呀,哎,Title文本呗,Fo size,我们来个二,呃30吧,R PX Li has高一点。嗯,比如说来个80,那其实上面这个啊。写一写就可以了,就这个呗,啊上下有点距离,那接下来呢,我们去写一下里面的图片啊来。图片的宽高都是50啊,其实它这一行整体的基调呢,就是这样对不对,那我们先去设一下这个图片来,那现在呢,应该是这个s item下边的。呃,Image啊,你用它也行,或者说我们用这个。有musicem吧,啊,它下边的一面来,呃,宽呢应该是100RPS高的话呢,也应该是啊100。
06:00
对吧,没问题,呃,那我们再看。图片是不是小了?没问题,那接下来这个一呢,要你看啊,要挪成跟我这个这样,首先呢,它跟这个在这个图片。原有的高度上呢,这个文本跟这个文本最起码是垂直居中的,然后呢,图片,呃,这个序号左右两边是不是有距离啊。那针对于这种情况呢,我是怎么写的啊,那现在呢,我们找到这个music h下面这个count,嗯,那它的宽高我呢让它跟那个图片一样啊,都是100RPS,然后呢,Text line,哎,Center,那这样的话呢,行高100RPS。那是不是就相当于是水平垂直居中了一样?没问题,那现在大家看啊,这儿没有上去。哎,没有上去是为什么啊,我们可以去琢磨一下啊,为什么他没有上去。嗯,你们也想一下。
07:02
现在我写的这些宽高这些。我们作用在谁身上了,是这个text对吧,这是个内联元素,所以啊,还是同样的问题。你内力元素身上是框框有用吗?没用,那我们是不需要将它设置成。或者那块。又因为这三个元素水平排列,所以呢,要设置成。行那一块儿对不对。哎,那这这个单是啊,除了设置行那块还有没有其他的方案啊。哎,那这个时候呢,大家看啊,我这样去做,我呢给这个music item,我去给它设置一个属性叫play。设置完它以后,我们再来看一下效果。他就好了。哎,他就好了。哎,为什么我一写这个就好了呢,那这里要注意啊,啊当啊一个元素,我们说啊当一个元素啊,它呢设置为这个flex,那其子元素啊。
08:08
会自动。成为什么啊,会自动的成为这个block元素。啊,这是flax布局的一个特性。正是因为我给他们设了,所以这三个字都能成为块了。那可能有的同学说,那块的元素不应该是独占一行吗?那你别忘了,这是flex布局,即使它是块,它默认也会在一行也水平排列。好的,那就这个,那剩下来呢,就是这个歌名了,那歌名这呢,我们也去给他设一下啊,同样的还是用这个去带啊,那对应的呢,应该是这个music,我们叫它name对不对。哎,它的高度。那现在呢,其实是继承过来呢,我们也写一下吧,高是差,哎,行高100RPX呗。没有问题来再看效果。
09:02
嗯,那这样的话呢,就。在一行都垂直居中了,然后呢,每一个music item,这有点边距最好,现在挨得太近了,不好看,所以呢,我给他去设一个marin,我们来一个套,哎,来个包筒吧。啊,来个bottom来,那这呢,我们来个20劈叉啊,就是把那些呢往下挤一挤,我们再看效果。那这个时候大家看啊,现在挤是挤下去了,但是下边这个看不见了。啊,为什么呢?来,我移上来,因为现在我们的swaper你要注意,它默认的有一个钥匙,你看高150P叉,而且还是个斜子的。那这个呢,肯定不是我们写的啊。那正是因为有它这个默认样式,所以才导致高度不够,那现在呢,我们可以自己去写一个样式啊,给谁写呢?给我们的appleper就它呗,这不Apple嘛,所以呃,这个s Apple呢,我们放到上面去,哎,我们针对于它呢,专门去设一个高度啊,比如说我们来个400RP叉,我们看一下效果。
10:11
那这个时候大家看。是不是都上来了,哎,没有问题啊,那这个图片呢,方棱四角有点不同,呃,不太好看啊,我的习惯是给它加一个圆角,我们来一个border radiOS啊,小一点啊,比如说这来一个6RPX。OK,那就差不多了。嗯,那这不就出来了吗。好,那现在呢,这都出来了,出来了以后大家看一下啊,我写好的这个,呃,其实每一个swaper item它是到这。那后边这个内容呢,是下一个item露出来一点。那你要注意啊,其实这个颜色呢,有点淡。那其实这个外SM就到这儿啊,它跟下一个中间其实还有点间隔。那这个我是怎么做的呢?我给这个每一个swaer他们进来这个包裹器啊,大家看。
11:03
这不有三个包裹器吗?给这个wa item,哎,我们去设置一个来放到上面。宽度啊,它的宽度我们来一个96%啊,来个96%啊,然后呢,来一个背景颜色啊,那这个时候呢,为了让大家看的清楚一点,我选择一个比较颜色比较亮的,我们再来看。好,那这个时候应该是能看到是不是中间有间隔吗?没有问题,那关键是我们如何让后边这个往前漏一点。对吧,哎,如何往前漏一点。OK,那。那我们就需要看官网了,来到组界这一块找到我们的SPA。嗯,S呢,有很多的属性啊,你包括什么自动轮播呀,呃,什么circular是否采用斜接滑动啊,这个也给大家看一下吧。那这个加上来其实就是一个斜接滑动嘛,就是无缝轮波,那我们现在看是不是。
12:04
是不是吗?哎,是这样的,哎,那就是这个,那除了这个我们再找啊,下边还有一个东西。Previous marketing,还有个叫next marketing,那么这两个对应的一个是前边句,一个是后边句,就是露出前面一项一小部分,还有后边一项的一小部分。对吧,那现在呢,我们要到后边呢,我就有这个。哎,比如说我给他设置一个next,那么对应的值呢,我来个50RP叉,我们看一下效果。哎,那这个时候大家看啊,后边这个是不是就露出来了,当然了你也可以加一个什么previous market。那。比如说啊,我们加到这儿,那对应的值呢,我也给他设一个50RP叉,我们再看一下效果。那现在是不是相当于前后都有了,那这种布局呢?其实我们在很多的网页里边也都见过。
13:02
哎,龙墨图中间这个区域两边有一点左右部分的,哎,流出来的部分。对吧,啊两种呢都可以。OK,没有问题啊,那这样的话呢,相当于我们龙模图做完了,然后呢,这个背景颜色如果说到真机上的话,你会发现特别难看啊,特别难看啊,太亮了,所以呢,最后啊,我会把这个颜色颜色给它降下来,它呢对应的是1D1D。啊,我挑了半天啊,我觉得这个颜色呢,在真机上啊还比较好一点,那这个呢,其实还有点怎么感觉,还是我感觉这个还是有点重啊,还是有点重来,那现在呢,我们再降一下吧。有这个FV这个可能会更大一点。往后排嘛。好多了,OK,那这是这个。好,以上呢,就是对这个排行榜啊,龙波图这一块呢,我们静态搭建,那么在这里大家要注意啊,我们又用了一些swaper的新的标签属性啊,包括呢,它是不是有一个默认的框高,我们需要去改一下。
14:13
好的,那这节课呢,我们先讲到这里。
我来说两句