00:00
好,最后呢,我们就要真正的去完成啊,这个推荐页面的这下面的一个列表展示功能。那么是个列表展示,而且是可以滚动的区域啊,所以说这里我们得考虑用啊,Square view啊,还是view还是view。那么如果是多列的话,就用view啊,这样只有这样一列的话呢,我们可以用那个list view组件来达成这个效果,它会比view呢更性能上会稍微好一些些啊。好了,所以这里呢,我们打算用this来完成这个推荐组机的功能,来,下面我们一起来写吧。来到这个的这个推荐这里啊,我们呢去定义它的样式,整体呢直接用view组件就好了。好,我们这里呢,也大家用这个编辑工,呃,编程工具去写吧。删掉它本身全都拜拜啊六我都不需要我们直接在系统组件里面拖一个Li。好,它的高度呢,高宽我们直接设百分百就好了,再找到第之间高宽百分百,OK,它这里已经设置好了,非常的nice,那么第里面它的高度宽度都设置好了之后呢,接下来给它里面for cell啊,他们里面要渲染的东西是cell cell呢它的整个区域内容呢,分为上。
01:20
中还有下下楼下三块区域,那么上面呢,就是一个一段文字,我们来设置这段文字。好,这段文字呢,它呢需要做些处理啊,当然不着急,我们待会来一直一点整,然后以及整个C呢,它是有一些偏定的啊,很明显是有个。呃,判定效果是不是,所以说我们可以找到继续找到cell啊。来大概数打开,我们找到这个cell,它应该有个偏定效果。Pad呢,是就好。OK,这样呢就有效果了嘛,好,然后这上面的文字呢,我们调一下它的样式。
02:02
它的大小的话呢,应该要大一些,至少16PS嘛。然后呢,它的也它的自重是要加粗的700啊差不多这样,然后呢,内容呢,我们调多一点,看他换行的效果是什么样的。对吧,那么我们希望如果超过两行的话呢,它就溢出隐藏了,就不要再再多显示了,因为超过两行再显示的话,整个内容就会拉的挺大的,我们就希望它这个标题呢,最多就显示这样两行吧,好吗?那么这时候呢,我们要去做文字的溢出隐藏啊。文字一组隐藏的话呢,在这里调样式的话,它是没有相应的样式可以调整的,因为它只有对齐方式。艺术隐藏呢,其实就是我们给它指定一个,因为它是两行不是一行,我们给元素指定一个高度,让它呢E,让它超出的时候overflow hidden,然后再test overflow为那个eips,就可以让它溢出隐藏了,所以我们需要退出去在外面去写这个样式。
03:00
因为下面这里也有这个艺术隐藏的样式要写啊,所以说我们呢,就在这里专门定个类名。叫。Else。我们就叫这个吧,好,呃,它呢就是。Test overflow为s overflow为啊,就这样一个类名,好,写好这个类名之后呢,我们接下来就选择它啊,给它加上这个类型就好了。哎,加上这个类名它就包含了,那么我们接下来就要做的就是给它调个高度,16PS的话呢,它的高度是乘以二三十二,那我们再给它多01:35PS。35可能不够啊,呃,16乘以二啊,那我们50。50差不多啊,那么溢出呢,它应该要显示这个省略号啊,我们来看一下。它这里是不是我们这个样,是哪里没写号,呃,Testoflow ES对吧,溢出隐藏是省略号overflow hidden,那么它应该要溢出的时候显示这个省略号啊。
04:04
高度的我们指定好了是50PS。OK啊,但是它这里显示的时候没有呈现啊,待会我们可以看一下咱们的这个页面上会不会有这个呈现,待会来看啊。呃,然后往下走,下面呢,我们继续是一个容器,这个容器呢是一左右点别不局,我们接下来整个绿容器。在cell里面去整啊,不要我们来看下这个结构,诶,或者错的位置啊,是要在cell里面整一个闭容器,然后这个闭容器呢,也很明显这个元素是水平排列的,所以说我们可以把这个容器的主轴方向调为肉,它就会水平排列了,好调为肉之后呢,接下来它分为一左一右两个区域啊,一左一右,左边是双谬,它又分为上下结构,右边就是张图片。左边又是个谬,右边是张图片,先把图片写一下。啊,图片的话呢,我们找到这张图片啊,再次重新选中它,图片的宽度呢,我们就占20%就好了,不要太宽了,对吧,然后高度让它自适应,那么怎么让它高度自适应呢。
05:10
图片呢,有个组件属性叫mode啊,Mode有一个属性叫wise face face呢就是高度会自动的适应这个宽度的大小,来自动调整它的高度,所以我们调这个属性就好了。好图片它的值为什么呢?不着急啊,后续我们会有数据展示的时候,环节再来写,反正现在呢,我们把这个图片先这样设置着就好了。对吧,宽度20%,那么右边的这个密容器呢,我们自然就给它宽度80%。宽度80%就好了,然后运容器的高度被内容撑开即可,所以说我们不着急去指定它的高度,好运容器上面呢,又分为以上以下两方,内容上面是一个容器,下面是一个文本来。我们接下来再给他一个闭容器啊好,上面这个密容器里面呢,有两个内容明显是水平排列,所以这个闭容器它也是主轴方向是肉。
06:01
好吃肉的话呢,接下来它里面有两个内容,一个是图片。很明显是一个图标啊,这个图标的宽高呢,很明显是比较小的啊,我们调成小01:1616啊占的大小,同时它这个圆的,所以说边框是border radiOS是50%,对吧,那么这样就是个圆图片,而具体这个图片的内容我们后面来调整。然后接下来我们再给这个密容器整一段文字。呃,这个文字很明显没有进去啊,我们要看一下这个文字得进去这个容器里面,OK,容器里面了,然后呢,它的文字呢,就插插插就好了啊。同时整个容器中他们要垂直居中,我们让它垂直居中,OK,然后呢,图片呢,我们加一个右边距就好了。哎呀,他们不要靠这么近,那个10PSOK,那么上面这一块就整好了,下面这里呢,直接就是一个文本。啊,它呢也是给一个高度。
07:00
字体呢,会相对来讲上面的更小啊,甚至对了,上面这个我们还调个字体,最大小呢,我们调成呃。12PS吧,12PS啊,然后下面这里呢,我们调成14PS大小,然后14PS高度的话呢,我们调成30。测试可能不够啊,40OK,因为它也是要显示两行文字的。对吧,我们来多一点好两行文字之后呢,它也得加上这个类名啊,加上这个溢出隐藏的类名不能溢出的,然后整个高度呢。选它啊50是不行的,这个高度它可能设置高度设置错了,设置高度设置错了,它设置到这个ELIS下面了啊,应该是调整上面的这个TEST1的高度,所以这时候我们要退出编辑模式去手动的改啊,把这个50移到TEST1这里。然后呢,下面这里我们自己手动的再加这个高度啊,40它下面已经加上了,OK,没问题,我们再进去啊。
08:03
好了,这时呢,文字应该会溢出隐藏,待会我们来看效果就好了,待会来看效果,图片呢,我们待会设置上图片,它自然就会有了。好,然后呢,在这些这里整个view的下面呢,我们接下来又是一个容器啊,来显示这个内容。好,这个密容器呢,也是一样,它是一左一右布局啊,它是水平排列,然后一左一右,其实这里有把叉啊,这里我们没有体现出来啊,这里有一个差的图片,我们来,我们要space between啊,Space between,他们水平排列space between,然后左边是一个容器,右边是一个图标。左边是个容器,整个容器里面呢,它也是水平排列肉,然后呢,里面有一段文字,两段文字中间是一个点。所以它有三段文字。好,这个文字的大小呢,和上面的大小是一样的,整个文本呢,我们叫五四范头。
09:03
OK,然后呢,大小的话呢,我们调成14PS,然后颜色的话,我们调成灰色,灰色的话就叫green灰色。好了,然后复制这个样式一份啊,我们改成下一个评论。对吧,我们调成评论好,呃,评论和中间赞同,这里中间还需要插入一个文本,我们接下来再插入一个文本。来,这时候我们就在下面拖拽了,会方便一些啊。诶,我们的文本呢。放到view里面,然后再把它的位置移上去啊,移到这个文本的中间中间去啊。你到这中间去,OK,就在这里,然后呢,它的内容呢,非常简单,它它的大小也是14PS啊,然后颜色也是灰色。只是它的内容是一个点。
10:03
对吧,我们找个点给它加上好,加完点之后呢,它有个marin marin左右都是至少5PS。好,这样呢,它就会隔开一些些,达到一个这样的效果啊,隔开一点些达到效果,那么右手边呢,我们整一个图片,最后整个图片。好,这个图片呢,就可以直接写了啊,它的大小呢,十。14PS啊。然后呢,他的图片就是那个close图片。点点斜杠,点点斜杠image下面的close点偏低,就是一把叉啊,就在这是不是一把叉,然后整体呢,他们要这个14有点小,咱们还是调16会会好看一些些啊。找到图,找到的图片。啊,在宽高调整的时候一定要回车啊16好,然后呢,我们让它整个内容在这个垂直方向上是三条居中的。
11:03
OK,这样呢,我们就把咱们的这个内容给设置了一下,设置好了好,其中呢,这个marin这些边距可能我还没调的很好,那么待会我们再调一下,以及最后呢,这里有一个深色的一个。内容啊,整个内容呢,其实我们做法最终啊,我是给他加了一个marin的。最开始我们希望加个marin,然后再再给他负元素挑个背景字,但是发现出不来,所以最后呢,我是给他挑了一个margin bottom。啊10PS的一个宽度,然后呢,颜色呢是一个。呃。一啊这个颜色,然后呢收的。痛。这个颜色是百分百好了,这样就达到一个这样的一个效果。好呃,整个呢,我们就开发好了,整个cell组件我们就开发好了啊,这里我们也能看到效果。下面是一段文本,下面是咱们的几块区域,对吧,都已经设置好了,设置好了之后呢,接下来我们就要真正的去加载这个数据啊EC呢,它的用法也是要指定一个ID。
12:10
指定ID,然后呢,我们在这里面去完成这个操作。来获取到这个元素啊。然后呢,通过disability load方法加载这个data,那么data数据是什么呢?我们已经提前给大家准备好了数据,这里有个datason,这个就是我们的需需要用的数据。我们把它放到我们的这个homes机中了,OK。整个数据呢,就长这个样子啊,它有作者名字,ID,标题,图片内容,这个点赞数,评论数和这个用户的头像地址都有,好了,那么我们在这里呢,只需要把这个贝塔引进来。
13:03
好,引入之后呢,下面就会加载这个点塔数据了,好一旦加载德塔数据呢,上面我们这里就会用上我们的一些模板语法,艾的标题是title。然后图片地址我们来调啊,图片地址呢,这里是指的是我们的那个啊,用户头像的图片是al。然后呢,这里是它的一个作者名称叫。然后下面这里是它的这个内容,Content。然后这边就是它的一个右边的一个显示的图片是item.cover。然后往下走呢,这里有赞同的一个数量item点。What number?以及它的评论数量,Comment number。
14:00
这样呢,我们就把咱们的静态组件,包括数据展示功能开发好。宝宝下面全量更新啊,我们一起来页面上看下效果。诶,你看效果就大概长这个样子。是不是做好了,然后呢,我们不需要这个滚动条的话,可以调整收。哎,这个我就打住他了啊手。Pro尾for这样的滚动条就会消失,同时我们再把整个页面的一个背景色去掉,找到最外面的index,啊,把它的这个白光的pink,拜拜。我们全量更新。好了,这样呢,就呈现一个这样的效果,我们希望效果如果好一点的话呢,应该是最外面的颜色是背景色是个白色啊,我们全量更新。好了,这样的话就是整体是个白色,包括它有这个灰色线条啊,那么我们就把。就是这个小功能呢,给开发好了,我们来看一下,看看有没有什么有问题的地方。
15:04
啊,首先这个头像呢,它没有显示的正确啊,没有没有显示正确,然后这个标题的话呢,如果只有一行的话,它的高度呢,定死了,感觉不太好看,以及这些内容呢,没有边距的话也不太好看啊,所以说我们最后把样式调一下。首先我们找到这个头像这里,它为什么头像没说到艾这里多了个T啊,艾多了个T好,第二个呢,是上下稍微有些间隙,不要靠的太紧了,以及上面这个呢,我们还是不加这个eipips的啊,不加eips这样呢,我就不用给它一个高度,它的高度呢,自己撑开就好,然后呢,下面这里呢,跟上下有些间距,我们找到。整个这个容器啊,让它上下有些间距,不要。就一点结局都没有。就是你啊,上下都是10PS吧,左右就是零,我们来看效果。
16:05
好,上下间距来了,然后呢,接下来这个距下面有些间距,对吧,咱们这个上面距间距右边有些间距,所以说我们找到这个内容部分啊。不是评论,是这个内容部分content。哎,这是可能子啊,我们来个妈,上面呢我们来个5PS吧,上右边呢来个10PS,在我们剩下的地方都是零。更新。好好,那么这样的话呢,就整体就会好那么一些些啊啊这个上面距上面这里这个间距稍微有些些大,应该是我们整个这个高度调成40PS会太太夸张了,我们调成35呢。OK啊,差不多啊,差不多好了,这样呢,我们就基本上把咱们的这个功能呢,给数据动态展示功能给做完了。
17:04
是不是?往上走没有任何问题啊,所有功能都能够完成体现,然后呢,它也可以滚动切换到其他页面去,非常的简单。好到这里呢,我们就要去给大家搭建好了咱们的静态页面啊,使用了这个dcpu组件,然后呢,同时完成了它的一些功能。
我来说两句