00:00
好,那我们继续啊,那我们这个头部搭建完了,接下来啊,我们去搭建一下这个列表区域啊,我们先去啊写它的结构,那么这个列表区域呢,又分为两部分,一部分这个导航啊,一部分呢是它的真正的列表区域,而这个列表区域呢,是一个可滚动的区域。好,那看完这个需求以后呢,来我们来到我们的代码里面,那这个时候呢,把头部收起来啊啊我们去,呃,接下来我们去写一下这个列表去,嗯,再加一个注释啊列表区域,来那来一个view呗。哎,我点那列表呢,我们就叫一个list container啊列表的区域。好的,那接下来呢,列表区域有头部对不对啊,那就是哎v.leastly。嗯,在这里面呢,有两个文本啊,左边呢叫播放啊全部,右边呢叫什么呀啊多学,嗯,OK那么多选这个,因为它比较特殊啊,在右侧啊,所以呢上来呢我就只能哎想到我们应该先给他来一个D帽类。
01:05
因为待会儿通过肋是不是控制它到右侧呀,好的没有问题,那这个头部啊,我们先写到这儿,那接下来呢,我们看一下效果过来。嗯,这不过来了吗?首先要把我们的多穴给它整到右侧去,对吧?啊,要整到右侧呢,也很简单啊,我们可以利用什么,利用浮动呗。对吧,没问题,那也就是说我们接下来诶,找到我们的样式文件过来。把这个样式文件呢,还是干嘛,我们去移动到右侧,在这儿去写,那接下来呢,嗯在这里,嗯,我们要写的是这个列表区域的样式。对吧,列表区那那Miss啊,它下面的这个T,首先我们能想到啊,让它去float一个right呗。枕到右侧啊,同时呢,来我们直接在这写啊,那这个list t啊,我们可以给它设一个高度啊,比如说来80RPX,同时呢,它的行高呢,来一个80。
02:12
那这样的话呢,啊,它这个文本啊,会上下有点距离,好看一点,嗯,好看一点。呃,然后呢,左右两边贴的太近了啊,这个时候大家看我写好这个从这开始到下边左右这不是都有一点间距嘛,那这个呢,我们需要给它的这个负元素啊,去设置一个公共的样式啊,去负元素去射它呢,左右有点留白,我们可以拿一个PA定,就是上下为零,左右为20。来上下为零,左右为20,同时呢,我们可以给这个负元素,我们来一个圆角,把border radiOS啊大一点,我们来个30,然后呢,我们给它加一个背景颜色啊。呃,Background吧,我们来一个白色加白色的目的是为了待会儿我会把这个副元素呢往上提一点啊,大家看,那其实我给大家放大一点,这样你能看到啊,其实这个往上走了,你看压住了上面这个头部的一小部分对不对。
03:10
而我们现在这个其实没有没有。哎哎,而且我发现啊,我们的圆角好像没有生效啊,List container啊,圆角加了没有生效是因为什么,我们没有往上挪了,看不到这个圆角。那这样的话呢,我可以给这个副颜色呢,我们来一个什么。来,我们来一个relative,然后呢,我们让他去往上走一点,负22PX,我们再看效果。看圆角就出来了,有了上面这个啊,头部这个图片的映射,你才能看到这个圆角啊,是这样的,没有问题。好的,那接下来头部整完了以后呢,我们快速的去搭建一下下边这个列表的结构。那么这个列表呢,最终呢,它一定是循环遍历出来的,所以呢,我们只需要写一个就OK。
04:02
那这一个里边呢,图片中间是文本,右侧是一个叠叠点。嗯,也比较简单啊,而且呢,它是一个可滚动的区域,所以呢,那下边啊,这个头部我们写完了以后,真正下边的内容区域,它呢,应该是一个高二。什么呀啊score will,而且这个纵向的话呢,那上来我们就知道啊,我们的score one是不是应该没错啊。没有问题,同时呢,我们给他一个class啊,那这个呢,是我们真正的这个列表区域,我们叫它list一个SPA。OK,里面的个体来我们来一个啊,那这呢啊是我们接着一个scoreem吧。滑块的个体呗,每一个个体都应该有一个it。对吧,面积标签左侧的来个src。嗯,那这呢,因为现在还没有动态的数据啊,我们先用一个静态的去代替一下,哎,女神点JPG。
05:03
中间呢是文本,那么这个文本啊,大家看是上下两行的对吧?啊,那这样的话呢,我就先来一个包裹器。那这个上下两行呢,是关于这个音乐的信息的啊,所以呢,我们这叫它一个music in。嗯,那上面哎是我们音乐的这个名称啊,所以呢,Guitar class叫music音乐的名字music name。啊,下面是作者,我们来一个author,就演唱者。可以吧,好的,那在这里面呢,我们还是啊先写,呃,写一个静态数据啊,比如说呢,我来一个光辉岁月,嗯,下面呢,我们来个beyond。在。比较老的歌曲,比较老的歌曲啊,是一个特别知名的一个乐队唱的啊。好的,那。呃。右侧呢,还有一个东西对不对,哎,是一个那个字体图标,那这个呢,我们用到的是一个I啊icon,那么对应的这个,呃,那个三个点的省略号那个啊就更多,我们用的是这个图标啊,叫IO就更多啊也比较好记,就是它们。
06:15
好的,那写完这啊,那这是X item,我们来看一下效果。内容是不是有了,内容有了以后啊,接下来呢,去设置一下它里边的这个样式呗,来首先呢,我们需要先量一下它的。宽高。图片这呢高是40和40啊,其实这个包裹器的枕高呢,就是这么高。啊,就是这么高,只不过它是被里边的什么子元素撑开的。啊,那没关系啊,我们现在呢,先去设一下这个图片的高度。就这个呗。对吧,哎,就是它,那那现在啊,我们再往下走,那这个呢,是啊,我们要设的这个是内容区的样式,嗯,好的,那现在呢,我们通过这个呃,SC。
07:05
I,我们首先呢,要找到它下面这个image,刚才我们量的是40乘以40,对吧,所以呢,这样的宽80呗,高的话呢,也应该是80。嗯,没问题,来往下滑一点诶。这样呢,往下滑一点啊,大家看的清楚一点好啊,图片我们整完了啊,为了好看一点呢,我们可以稍微给它来一点这个圆角,比如说来个八呃8RPX啊来我们看一下效果。图片是不是变小了,那现在呢,我们要做的是让他们横向布局。嗯,横向布局,哎比较简单的是我们给这个scoreem,咱们去设一个什么呀,哎,设一个display对吧,Le。嗯,没有问题。好了,那现在呢,它应该是横向了,横向了以后啊,先不管别的这两行文本要上下啊,要纵向去排列,而且呢,他们俩大家看啊,应该是上下要平分这个距离。
08:05
嗯,要平分这个距离。那这样呢,这样这样的话呢,大家看我怎么写啊,那这个music info。对吧,它里面是不是有两行文本上下要平分。对的不哎,上下要平分,那首先啊,上下平分的话呢,我选择给他下面这个text。哎,两个T的标签呢,我去给他设一个东西,呃,设什么呢?我们可以设它的高度,喂,40,因为总高是不是80呀,啊那一人设40,然后呢,让他们基于这40。在。纵向居中不就可以了吗?同时啊,我们可以去给他设一下这个字体大小,比如说来个24R PX,那你要注意啊,Text是。内定元素直接设置高度是不生效的。不生效的,那怎么让它能够生效呢?我们可以给这个副元素music in看,我们设一个display flag。
09:04
对吧,同时让它纵向排列,我们是不是修改一下这个主轴的方向。就OK了。哎,要注意啊,设置完它以后啊,当一个盒子设置完flex以后,那么它下边的子元素会自动的成为block,也就是说块元素,正是因为这样我才能设置高度来,现在我们看一下效果。嗯,过来了吧,没问题,那这个时候呢,要注意啊,他这呢,哎,图片太近不好看。那我们可以呢,来一个marin left,哎,比如说呢,我们来一点半面距啊,20个像素有点距离呗,对吧,好看一点来,那现在呢,我们去看一下效果。OK,没有问题,好的,那么接下来呢,我们要把这个三个点呢,放到右侧大概这个位置来,我看一下,我写好这个。而且呢,它在这个整体里边呢,应该是要纵向要居中。
10:02
要居中。首先呢,摆放到右侧的指定位置呢,啊,我们可以怎么做呢,找到这个icon。来sc item下边这个icon对吧,摆放到右侧的指定位置呢,那我们需要用到这个定位absolute。啊,它用到absolute,先不要着急写别的,首先呢,那负元素这呢,是不是应该是operation一个relative。右侧摆放到指定的位置啊,同时啊,你要保证用户点击你这的体验好,你怎么去做呢?注意啊,可能有的同学呢,只是知道我应该摆放的位置。啊,没有去设置它的宽高,那用户体验其实很差,什么意思呢,大家看着我这个三个点本身就这么窄。那有可能啊,用户要点你这儿呢,要很费劲,那必须要点到这三个点是不是才能。触发的点击事件。
11:00
那为了用户体验好的话呢,我们可以悄悄的给他设一个宽高,让他的可选可点区域呢大一些,这样的话呢,用户不容易误触。只不过我们可以不让用户看到这个宽高,不就可以了吗?所以啊,大家看我我怎么去写,首先呢,我给他设一个宽高。哎,比如说它的宽80高的话,那肯定是80,我们要因为要跟我们这个其他的高度呢,要保持一致。啊,那这样的话呢,啊,我可以怎么去做呢?比如说我们来一个line k为80,首先它什么纵向居中的呀,那么我们看一下效果。哎,而且居中的话应该在右侧是吧,那这呢,我们来一个为零。看一眼。嗯,是不是跑到这儿了,跑到这里以后啊,大家再看的清楚一点呢,我可以给你先加一个背景颜色啊,比如说我们来一个红色。我们看一下它这个区域。这不在这儿吗?你看可选的区域就挺大了啊,没有问题,那也出用户到处啊,点击这个区域都能够触发,点击他身上这个时间。
12:03
对吧,哎,但是呢,现在这个三个点呢,太靠里了,我们要往外挪一点,那这个时候呢,我可以怎么做呢?啊,我去设置一下它的这个对齐方式啊,我们来一个看text,我们来一个right。没问题,那这样的话呢,它就会跑到右侧。对吧,那最终我们把这个背景颜色一撤掉啊,用户根本看不出来我们的可写区域有多大。这不就过来了吗?没有问题啊,那到现在为止啊,其实我们这个。哎,静态结构呢,就已经搭完了,然后啊,我们考虑的再周全一点的话,大家看一下。我们这儿最终是不是要放的是歌名还有作者呀?啊,你要注意啊,尤其是啊这些老外的音乐,他们的歌名或者作者有可能很长。如果特别长的话,那换到下一行就会丑的一塌糊涂,那这个时候呢,为了保证这个问题,我们可以怎么去做呢?
13:04
嗯,我们可以设置这个中间啊,Music info。我们给他来一个什么呀,Max吧。比如说呢,我们来一个400RPX一旦超出怎么办?首先不允许换行no对吧,超出的部分呢,我们可以。隐藏掉,然后呢,隐藏掉的部分我们可以用什么text overflow也是用这个省略号代替。对吧,来个。这个呢,相当于是单行文本溢出省略号代替,我们可以测一个啊,比如说这个歌名特别长,光辉岁月这么长,我们看一眼。这个时候啊,大家看啊,哎,那现在这是不没有效果,没有效果是因为啥,是因为这个东西呢,我加给谁了,我加给没有这个info了,他呢应该加给谁。应该加给它下边的这个text。对了吧,来,我们再看一下效果,由text去解决这个问题,这不就到这儿吗?
14:04
啊,400你觉得不够啊,你可以来个500啊,这个呢,就看他呃实际的需求,我到底要给他写是多少。这不就到这儿吗?哎,这样呢,也是我们要考虑的事情啊,好的,那现在呢啊,我们把这些截取掉啊。留一个就够了,嗯,没有问题。那我们最终再看效果啊,它就是这样的啊,如果说我们这儿的个体特别多。最终是不是要循环便利?对吧,那我们可以先做一些假数据啊,因为是假数据啊,我就直接给它粘贴复制,到时候呢,我们循环编列就好了,来我们看一下这个最终的效果。大概这么多。没有问题,那这么多的话,这挨得太近了,密密麻麻的啊,首先啊,个体跟个体挨得太近。每一个个体,那这样的话呢,我们找到这个score item,我们去先给他设一个包,比如说来20个像素的像外边距。
15:04
嗯,可以吧,啊,那这样的话呢,来。是不是好看一点没有问题,同时啊,大家看我这儿滑动的话呢,上边包括这个播放全部不应该动。不应该动。啊,我们只滚动下面的区域,对不对,那这样的话呢,我们应该怎么做呢。呃,我们需要给这个scar will是不是设一个固定的高度啊?就它呗,来内容区这score list score,呃,要给它设一个高度的话呢,我们应该设多少。那还是拿我们整个页面的高度。对吧,减去头部的高度,减去这个头部的高度是不是就可以了。那头部的高度刚才是多少呢?是300。二。对吧,那下面内容区这个头部是多高啊,我们刚才设的是多少呢?设的是80。是80吗?啊,那这是看的是图片啊,不是这来我们往上看是这个,这不是80吗?所以呢,应该是减去一个300减去一个80就好。
16:08
来我们先看一下啊,来那这里啊高度啊三去计算一下,应该是100V减掉我们的380RPS。我们看一下效果。那这个时候大家看看滑动没有问题,然后外边移动没有滚动条,说明我们计算的是对的,那在这里呢,可能有的小伙伴有疑问啊,说下边这个区域不整体往上偏移了负20吗?这个要不要考虑?想想看。这不是吗?我们内容去呢,往上P的负20要不要考虑。这里是不需要考虑的,因为啥我们用的relative relative这个定位呢,是半脱离文档流啊,注意啊,它还在文档流站位。还在文档流占位,所以我们只需要考虑它自身的高度就好了,因为它一直在占位嘛,那这样的话就跟这个就没有关系了。
17:01
OK,那这节课呢,我们是把这个,哎,每日推荐的。页面的这个静态结构呢,我们就全部搭建完了来,那这一节课呢,我们先讲到这里。
我来说两句