00:00
好的,我们继续啊,那么这个每人推荐页面列表呢,我们已经动态展示了啊,那么这节课呢,我们要去做的是什么呀?啊,是里边这个页面。啊,咱们首先呢,需要将里边页面的这个静态页面去给他搭建一下,那么当前的页面呢,就是最终啊,我们音乐的播放界面。OK,那这样的话呢,我们再去整一个页面啊,我们先把这个就关掉了。然后呢,在pages下边啊,我呢再新建一个文件夹,那这呢,我们就叫它一个什么呀,叫哎吧,嗯。歌曲的详情页呗。然后来到我们的这个开发工具里边啊,我们利用它的快捷方式呢,帮我们去创建一下这个页面叫什么叫骚呢,跳一会车,那么对应的页面路径提到上面去,那这样的话呢,是方便于啊,我们之后调试好的,我们保存一下。那3D里面呢,我们先去搭什么啊,先去搭这个静态的页面啊,我们先把这这一块去写了。
01:05
呃,一个。上面这个文本内容。对吧?啊,那这个文本内容最终放的是歌曲的名称。哎,放的是歌曲的名称啊这啊,这是歌曲名称啊,这个呢是作者也是野唱者,那么下边这呢,有一个摇杆。哎,再往下呢,这是一个磁盘摇杆,这儿呢,还有个什么,这叫底座。好的,那么我们一点一点的来啊。来来到我们的详情页,那在这个里面啊,我们先把这些就撤掉了,首先呢,我们先整一个包裹器啊,那这呢是啊我们的so detail的啊,包裹器container,那在这里呢,我们先整一个上面的啊。那这呢我们来class啊,这呢就叫翻一个other,嗯,也唱者呗,那也唱者来我们确认一下啊,那这呢应该是也唱者才对啊,我们往下翻译个啊。
02:00
哎,演唱者张学友对吧,啊,没有问题啊,就以这个为例吧,啊就放到这儿好的,那演唱者这个有了以后呢,我们还是啊先来一个。静态的啊,稍后呢,我们会把它写成动态的,那么再往下呢,应该是磁盘,那所以呢,我这整一个什么image标签在这里面呢,我们来个src。啊,那这个呢,应该是摇杆啊,应该是摇杆,摇杆的话呢,对应的图片我们过来看一下,在我们这个so的页面,嗯,这里呢有两张图,一个是摇杆,一个是磁盘。啊,这个摇杆呢,叫needle,哎,叫needle,我们先去引一下这张图啊,那么在我们的sta sta下边呢,Images下边啊,我们找到这个sound,然后呢,啊,我们去找这个needle。点啊PNG。啊,使他。没问题,好,那现在啊。
03:00
我们的这个歌曲的演唱者包括呢,哎,我们这个摇杆我们已经整完了。对吧,那么接下来呢,啊,我们再去看下边。下边呢,是这个磁盘。磁盘里边大家看啊,首先有磁盘,也有当前歌曲的一个封面图,它呢其实是有两张图片组成的。啊,有两张图片组成的,你可以看看我们这个磁盘,它本身中间是不是哎是空的呀。啊,那这样的话呢,因为有两张图啊,所以呢我呢找一个什么包裹器,主要就叫个DSC的啊这个container里边呢,首先我们先把这个啊磁盘给它引入啊,Static下边image下边啊,Sound下边的这个dc.PG呗。那么这里说歌曲的分面图啊,我们待会儿来整。那么现在呢,我们看一下我们的页面过来。诶,大家看对应的三部分内容,哎,是不是已经进来了啊,没有问题,好的,那这三部分内容有了以后呢,背景颜色,哎,是白色的啊不好看,那现在呢,我们先去设一下它的背景颜色。
04:13
来。找到我们对应的钥匙文件过来,那这样的话呢,我们首先呢,去设一下它这个。所以外边的包裹器我们要设一个整体的背景色啊,你注意。我写好这个是不是整体的背景色是一个颜色呀。对吧,啊,是一个颜色啊来稍等我把这个画面调出来。嗯,我们切换过来,哎,是他。嗯,没问题,那这样的话呢,要设置整体的背景颜色呢,也比较简单啊,首先啊,我们可以让我们这个高度呢,是100%。对吧,占满整屏,那么接下来呢,我们去给它设一个背景颜色啊,这里呢,我用的是rgba,嗯,哎,Rgba的方式去设置的啊,在黑色的啊,在黑色的基础上,我呢设立一个透明度,那么透明度呢是0.5。
05:07
哎,我们再看。好的背景颜色是不是加上了,加上来以后啊,那最终里边所有的内容其实都是纵向排列,左右居中的。啊,纵向排列左右居中的,所以啊啊我这呢给这个包裹器,这呢再设a display flag,然后呢,Lex direction,因为它是纵向,所以我们来column,那这个时候呢,我们去修改一下侧轴啊也是现在的X轴的对齐方式就水平居中。对吧,好,那现在啊,我们再来看啊,最起码你能看到啊,这个文本是不是已经居中了,说明生效了,下面这两个其实看不出来,因为现在这个图片的大小,哎,还没有设。好的,那这个时候呢,我分别去设一下啊,这个摇杆呢,跟磁盘的大小,我们来一个class啊,那这个摇杆呢,我们就叫它你懂。
06:00
对吧,那这个磁盘大小了,你就DC呗,跟他那个当初的这个图片名称我们保持一致。好的,来过来。嗯,那么这个摇杆哎,多大呢?我们可以量一下,我写好这个啊,那这个时候大家看我移上来。这儿呢,显示的是137.07,包括什么武器啊。这很明显,呃。计算的是不是有小数了,那我当初设的时候肯定不是这样。啊,为什么会这样呢?因为我们的摇杆最终呢是要加旋转的效果。所以呢,你直接量哎是量不出来的,量不出来的,那这个时候呢,我直接给大家写一下啊,那么这个呢,豆的哎宽度哎是192R PX。嗯,它的高度呢,是2742PX。哎,是这样的,来,我们设完这个宽高,我们再来看打卡在这的。
07:05
在这儿呢?那现在啊,为了让大家看清楚一点呢,我可以呢,先给它加一个边框,Border erpx solid,我们再来一个再看。哎,在这注意啊,最终这个氧杆的底座应该是在正中间摆放,对不对,所以啊,我是这样去操作的,我们给它看一个position relative。然后啊,我们让它那往右挪一点呢,就是left,我们设一个右偏移量,那这呢,我设的是60。一个叫左偏一辆啊,我们往右去挪,右十啊60,那那这个时候我们再来看,大家看就挪到中间了。啊,没有问题,好,那这是摇杆这一块。那磁盘呢,我们看一眼。哎,现在呢,我们量的是这个磁盘的大小,其实也是他们最终包裹器的大小。
08:01
啊,这对应显示的是299乘以299。对吧,所以啊,来过来,我们给那个磁盘DC的container,就是他们的包裹器呢,我们设一个宽啊598RPX对吧?啊高的话呢,也应该是啊598RPX呗。对不那么宽高有了以后啊,同样的看的清楚一点呢,我们可以先把这个边框呢,拿到这去用啊,上边最终是不需要边框的,来我们再看一眼。边框是不是出来了,出来了以后呢,我们需要让里边的磁盘是不是跟我这个一样大呀,那那简大啊哎。哎,里边那张图呢,其实我们有一个自己的类啊,就是它那它的宽度呢,现在应该是598,你写100%呢也可以啊也可以,我这儿呢,就写598了。没有问题啊,那这个时候我们看一下效果,哎,是这样的。好的,那么现在啊,这个磁盘跟摇杆其实接不上,我们的磁盘呢,需要往上去挪一点。
09:07
啊,需要呢,往上挪一点啊,所以我们这个磁盘这里。它的包裹器呢,整体要往上走,我也给他一个。嗯,Relative,然后呢,往上走是负值对吧,那我就来个一百七负的啊,一百七我们再来看。嗯,大家看移上去了。对吧,移上去有一点不对劲啊,这个磁盘是不是把摇杆挡住了。最终摇杆呢,应该是要压住磁盘的啊,要压住磁盘的,所以啊摇杆层级呢,要比我们的磁盘高,这是肯定的。啊,这儿呢,给大家加一个注释啊,那这呢是我们的摇杆,嗯,那下面这个呢,是我们的磁盘区域对吧。好,摇杆跟磁盘有了以后,大家再看一个东西啊。这个东西底座30乘以30,我为什么单独搞了个底座呢?哎,我在网上在网易云乐的这个web APP。
10:09
啊,就他的官方网站上呢,我去发了一张图,就是刚咱们刚才用到那个。什么呀,这个底座,来这个摇杆。这个摇杆呢,我们发现比较坑的是什么呢?这个呢,跟它APP上面的摇杆不一样啊,这个底座上只有一半。啊,不好看啊,那这是因为现在它少了一半啊,所以呢,大家看我是怎么做的啊,我在这里呢,又给他整了一个cycle吧。表示圆,那么这个圆呢,里面没有任何的元素啊,我用它呢来充当那个什么底座。啊,用它来充当我们的底座,也就是说这个CYC口啊,我呢宽度呢给它设一个60RPS高的话呢,也给它来一个60,那么这里呢,它肯定是个圆的啊,Border radiOS,我们直接来一个什么,来一个50%呗,同时能想到的啊,它的背景颜色是。
11:06
白色啊,是白色。来,我们看一眼。这个东西是不是出来了。没有问题,然后呢,当初写的时候啊,你看他这个跟上边这个作者的名称呢,挨得太近了,所以呢,我给这个底座呢,来一个market啊,来一个market上下为十个像素啊,左右呢为零。哎,让这个底座呢,往下走一点。走到这儿。对吧,那现在啊,我们是用一个圆充当底座,那你别忘了,这个摇杆是不是得往上挪一点,挪到这里呀。那你得跟这个底座吻合呀,否则的话这就露馅了。对吧,啊,所以啊,当初我们的摇杆这我们已经开了定位了,我再让他们去往上走一点是不是就可以。对吧,往上走多少呢,我这呢,哎,经过自己的测试啊,走40啊正好,那这个时候我们再看大看,其实就压上去了,压上去以后啊,现在呢,这儿稍微有一点能看到有点阴影的地方,那是因为这是摇杆的颜色压住了底座了。
12:15
啊,而我们最终呢,应该是底座要压住这个摇杆才好看一点啊,所以。我会选择让底座。层级高一点,那这样的话呢,我就给他开一个relative,同时他的一个index高一点。而且啊,这个底座的最终的这个层级要高于摇杆,摇杆呢还要高于磁盘对吧,底座层级其实挺高的啊,为了表示它挺高,那这儿呢,我写了100。嗯,我写了100,而我们摇杆这儿呢,我们也得给他来一个层级啊,首先呢。它要低于我们的底座,来个99。而加了99呢,是不是要比他这默认的层级要高呀,那这样的话我们再来看效果。
13:01
大家看压到它的上面了,没有问题。好的,那现在呢,相当于我们就把这个上边这个区域的这个。啊,静态结构我们搭完了。对吧,那现在呢,继续往下写,那这中间最终是不是应该有个图片的分面图呀,这个歌曲的封面图。所以呢,我这儿再加一个一面的标签。来src现在呢,我先用一张静态的图呢,去给它代替一下,我们去把它放上去。哎,女神点吧,JPG,嗯,是他最终呢,这放的应该是我们的music对吧,Image音乐的图片。来,那这哥们我们看看啊,现在呢,图片进来了,我邀请你做成什么样呢?做成我这个样。图片在这儿,而且大小大概是这么大。对吧,那里边这个大小是多大呢?你可以量一下啊,里边这个打卡啊,是185乘以185。啊,所以我们首先呢,要给这个。
14:04
嗯,设置一下啊,它的宽高,嗯,对吧,那么因为都是啊185185,所以这呢应该是370RPS啊高的话呢,也应该是370RPS呗,然后呢,因为它是圆的啊,你就border radiOS,我们来一个50%。对了吧,啊,那现在呢,相当于这个图片大小,我们设置好了。那再看。嗯,在这呢,现在呢,我是要让这个子元素的图片呢,在负元素这个里边水平垂直居中,是不是要摆到最中间呀。哎,这又涉及到让子元素在负元素水平垂直垂直居中了。那么之前呢,我们是不是用muy left为负值的那种方式,包括left和top为百百分之五十去设置的,那这一把呢,我们再换一种方式啊,我们这儿来个啊,Absolute。
15:02
它要基于负元素定位,负元素是不是已经开了相对定位了。啊没问题,那这里呢,我们用这个top为零啊,上右右为零啊,下为零左为零,然后呢,我们来一个marin啊,然后呢,来一个什么呕吐,那这样的话呢,其实也可以让我们的子元素在负元素里面水平垂直居中,大家看我就放上去了。啊,没有问题,好的,那到现在为止啊,我们这个上面就静态页面全部搭建完毕了,那这个时候呢,我们可以把这个红色的边框就给它撤掉了,那现在呢,我们看到的就是最终的啊这个静态的效果。那那这节课呢,我们先讲到这里。
我来说两句