00:00
好的,我们继续啊,那我们头部哎整完了以后呢,那这节课呢,我们来看什么,看这个导航区域,哎,导航区域呢,首先啊,它是一个可滑动的区域,对吧,而且呢,里边的文本大家看啊,它并不是固定的,呃呃几个字,那有长有短啊,这是我们首先能看到的啊好,那这个时候呢。来,我们先把样式关掉啊,那头部写完了以后呢,我们收起来啊,我们再往下走啊,接下来呢,我们要做的是这个导航区域,嗯呃,导航区域来过来,那因为它是一个可滚动的,所以呢上来呢,我们用一个score为U啊,因为是横向滚动的,所以score X为啊这是我们能想到的。对吧,那在它的里边啊,我们来一个view。那里边因为是导航的个体,哎,所以这个时候呢,呃,我给它呢来一个类啊,那里面的类呢,我们叫它一个什么呀,Navy HM呗。
01:00
哎,NAV item好,Navy item呢是个体,那这个时候呢,大家看一眼啊,现在我们不光要考虑这个个体啊,大家看到时候这个每一个个体的下边,我点谁谁的身上的高亮啊,高亮的显示这个下边框啊,那这个时候呢,你看我点这个万有万有引力嘛,哎,你会发现这个下边框呢,正好跟这个文字的长度是一致的。对吧,啊,那这一点呢,我们要考虑的话呢,我的结构啊,是这样去写的,我在它的里面呢,啊,我再套一层叫navy啊,比如说我们来一个content。哎,两层,那么现在啊,为什么是两层呢?待会儿啊,大家一看就知道了,那么现在呢,我没有动态的数据啊,我们先写写一个静态的,那这样的话我们先不用表达式了啊,比如说呃,我们先来个推荐。然后呢,我复制一份啊,那推荐有了以后呢,我故意的在里面呢,再换一个,比如说它那个叫万有引力啊,我们换一个长的,然后呢,我们多复制几份给他,哎,在没有动态数据之前呢,啊,多复制几份。
02:09
那那现在啊,我们这个内容有了以后,我们看一下我们的效果,大家看文本有了,好,那我们要做的第一件事情呢,就是让它横向去布局呗,那这个呢,比较简单啊,首先我们给最外边。哎,起一个class类名,那这呢就就像它一个navy,哎,Score,哎,导航的滚动区域,那么对应的啊,我们打开我们的样式文件,嗯,来还是呢,给它移移动到右侧往下走,那这里呢,我们要做的是这个导航区域的样式了啊首先我们给外面呢设一个display。Lex对了吧,那当我们给外面要设这个flagx时候,别忘了啊,现在因为我们用的是scar you,那这个时候呢,我们应该是开启一下这个。
03:02
哎,允许使用啊,看允许使用我们这个伸缩和模型。那好的。把enable flex1加上,那这样的话呢,它应该是来过来。去横向了,哎,那这个时候呢,大家看到啊,虽然说是横向的,但是这样纵向布局。那这是为什么呢?这是因为横向的宽度不够了,以后呢,它会自动的给你换本本的画到下边去。啊,针对于这个情况,我们怎么解决呢?我们可以啊给这个伸缩核模型呢,设一下这个right space no rap,哎就是说不让它往下去换行,OK,来来,那这样的话呢,大家看已经横向了啊,已经横向了啊那这个时候呢,诶你看啊,这不能滑动啊,不能滑动的话,我看一下这我们拼错了,应该是scar X啊来我们再看一眼。嗯。你看滑动就好了,没有问题。
04:00
好的,那么现在呢,它是每一个个体跟每一个个体之间挨的太近了,挨的太近了,那这个时候,那我们里边注意啊,它最终呢,应该是由内容撑开的,所以里边的话呢,我们并不能设置它的宽宽度。那么每一个个体跟每一个个体之间呢,有距离的话呢,我是通过外面的这个navy item啊,那叫navy score,下面呢,哎,这个NAV,嗯,Item,我们可以给它加一个什么呀,我们去给它加一个PA啊,比如上下为零啊,左右呢,我们来30个像素的啊,这个左右内边距啊,这个时候呢,大家能看到诶你看到这个。每个个体之间是不是有间距了啊,会好看一点啊,然后呢,我们去给它设置一下里面的这个字体大小啊,比如说呢,我们来个28RPX啊字体大小。呃,没有问题,同时我们去给他设一个高度吧,啊设一个高度,那这个高度的话呢,你比如说我们来个60吧。
05:03
嗯,60的高度啊,那一旦设了高度呢,那对应的应该有行高,那它呢,也应该是60倍,好的,那么现在我们再来看,嗯。差不多了。嗯,那现在的高度宽度也都有了啊,那接下来呢,我们先去把那个红色的下边框这个给它做一做啊做一做。那到时候呢,我们是点击哪一个NH呢,它的身上呢,有这个下边框对不对啊,有这个下边框那。现在啊,因为我们还没有动态的数据呢,我们可以先随便挑一个去做这个事情。来随便挑一个去做这个事情来,那这个时候呢,我们先给这个推荐整一整啊,因为最终的下面框呢,要跟字体长度保持一致啊,所以呢,我们应该是作用在里面啊,那这呢,我们给他拿一个active。
06:00
Active好的,那这个时候呢,来在里边去写啊,那就是navy啊,我们找到这个item,它下边的这个active。对吧,啊,那这个active呢啊,我们怎么去写呢,也比较简单,我就给它加一个啊,那就erps solid,我们来一个我们这个。主题色啊,那还是再去取一下这个颜色来把它关掉,嗯,然后呢,我们放到这里。OK,那我们看一下效果。嗯,那这个时候呢,大家看啊,这个下边框就加上了,而且跟推介一样长,你也可以给谁呀,给这个万有引力这一份啊,我们可以看一下嘛,来,那这个时候切过来,来,你看跟万有引力一样长啊,没有问题,那这样的话呢,相当于是我们这个动态的部分呢,就。整完了。哎,这个所谓的动态呢,就是这个啊,点进两个,到时候我们只需要动态的控控制这个class是不是就完事了,哎,没有问题,好的,那这一节课呢,我们主要是去对这个导航区域啊,我们进行一个静态的搭建啊来我们这一节课呢,先讲到这里。
我来说两句