00:00
下面我们来搭建下面的这个分类列表和食品列表区域,我们看怎么来做啊。首先我们先要知道一个。一个内容就是它呢,这里是有两个滚动区域的,那么最简单做法呢,是用sc view组件就可以完成左右两侧的一个滚动区域,但是咱们这里呢,用this view啊,因为呢,它这个性能方面呢会啊更好一点,并且呢,将来我们做这个tab切换的时候,右边这个定位呢更好,非常简单就能够完成啊。好啊,那么下面我们来做一下用this view组件。那么下面呢,我们整一个。呃,直接算吧,就是左边一个第四右边地图,那么我们要包一个容器在这里面。好,我们接下来再往下面翻一个。六字键,OK,这个view呢,其实如果说结构的话,应该在这个上面,这两个位置的的上面啊,会更好一点啊,就在这,OK,没问题,它的背景色呢,是白色啊,其实也是白色的。
01:04
那么我们可以放在这个里面更好,放在这个这个里面,这样我就不用去搭额外搭配这个背景色了。好了,整块区域呢,我们给个高度,就是这个高度就是它整个滚动区域的高度,比方说我们设置为500PS。好,500PS的话呢,后面我们这个不用担心啊,这个肯定是最终它会它会定位在那个位置,所以说不用担心啊,500PS在这,而且我们看到它跟上面的swaper好像这个间距有点大,其实也不染啊,因为这个swaper的组件还是一样,在我们这里显示的时候,它这个内容包括功能,还有包括这个高度,它就写死了。但实际上我们如果放到我们那个设备上,它肯定不是这个样子,所以说不用担心啊。好了,我们接下来呢,给他两个CPU组件一组。一。两个绿都可以了,那么我们首先让这两个主机是水平排列,所以说我们布局调为肉,这样它们就会水平排列了,啊高度的话呢,他们的绿都是百分百。
02:05
但是左边宽度20%,右边宽度80%。嗯,我们来设置一下。左右对。好了,呃,宽度80%,OK,那么左右两侧就是list组件,那么list view组件呢?如果你去看光测文档,它其实上面有一些例子介绍啊,我们打开这个am框架的文档,大家看一下这个Li组件。OK,呃,This view组件呢,它的性能会更好一点,同时上来下载啊,上下刷新都支持,然后呢,Sc view的所有属性它都能用,那么this view里面呢,必须要放置这些cell list header list foot这些组件啊,其中cell呢,就是显示的每项内容,所以说我们要在list view这里面要放cell才行。
03:06
来,我们呢,往里面塞。对吧,然后CL里面呢,其实就是显示一个文本,我们来看到这里啊,它就是一个。一个文本,所以说我们在这里面塞一个文本就好了。文文呢,我们把这个样式呢,稍微写一下,然后待会复制多份,我们看效果,然后叫KG范头。好做完之后呢,我们找到这个CL组件。C组件呢,我们高度给它一个固定值,比方说给个50吧,然后呢,让他们元素呢。对吧,那它元素在位置上居中,以及这个文字的大小的话呢,应该为14。左右啊。OK 14PSOK,然后呢,整个它是居中的背景色呢,我们给不给都无所谓啊,好了,那么这样呢,我们就把它给啊,基本设计好了一个这样的一个内容,下面我们复制多份,也能看到是不是它有多份,但是实际上只要一份啊。
04:16
那么通过光头的例子呢,我们这个Li组件是这样使用的,它需要获取到这个Li view组件的这个容器,也是通过多操作得到这个这个元素,得到这个元素之后呢,我们通过这个元素的一个漏的方法来加载数据即可。好了,那么这个操作应该在哪做呢?因为将来我们这个数据是发请求得到的啊,发请求得到,那么得到的数据长什么样子,我们也可以看一下,将来我们会发一个请求。呃,来打开我们之前的这个数据模型。啊,其实就是找到接口文档,就点击开发云函数,然后随便点一个,在这里有个接口链条,就会跳转到我们接口文档,我们在很早之前录数据的时候就得到了一个get user get shop in for的一个这样的一个呃接口,它可以根据shop的ID来得到所有的shop的内容。
05:10
我们这里呢,需要再回退一下,找到我们想要的这个说法ID。那我们说了,唯一有数据的就是个昌虹百啊,昌宏百货店,所以说我们拿到他的ID复制一份,在这里填写ID串要,那么下面就会得到所有内容,其中这个can就是我们的分类数据,分类数据呢由几部分组成啊,我们后面可以看到一下,我把这个地址在这里输一份啊。这样的话呢,我就可以折叠起来我们小的数据了。所以说这个carry呢,将来就是我们想要的这个分类数据都在这啊,都在这,那么后续我们可以对它进行啊复制,对吧,我们全部复制一份,假设这个数据就是我的数据啊。我们要发请求去请求数据的话呢,我们要在页面的这个API ready实践里面去完成,对吧,那么在API ready怎么办呢。
06:01
我们在这个空白区,任意的空白区点击一下,那么在右手边这一块就会给它加上页面的事件了,还可以设置统一的一些什么样式啥的啊。我们就要绑定这个页面的事件,其中这个ready事件就在这啊,我们点击右手边这个按钮,那么就可以在ready事件中添加我们要执行的函数。添加我们要执行的内容,我们首先要获取到这个,呃,来往上走啊,这个先暂时用不上的,取消下,我们首先要获取到这个c view组件啊,所以我们先要找到LIC组件,在属性这里可以给它添加一个ID。对吧,比如就像carry,他为我将来去获取它。好,然后再点击这些任意的空白区域,我们呢,再来到这个API ready事件中,OK,就在这事件啊,在这里面呢,我们就可以通过。对吧,通过点。
07:00
Get about it?获取到我们的这个carry。对吧,获取到这个容器。好了,然后呢。第二,用load方法。会加载数据,所以我们这里就要用这个carry的一个方法叫load来加载数据。对吧,那么数据就要放在这个位啊,数据呢,要放在这个漏的接收一个对象啊,对象里面有个属性叫data data就是我们要塞的数据了,好,这个数据呢,我在这里已经进行了呃复制诶,我们也可以只复制其中的carry啊。对吧,复制carry好,然后在这里我粘贴一下。OK,然后呢,这carry就复制上去了,当然它其实还包含了那个负的数据啊,所以说咱们这个数据这里,呃,我其实如果可以的话,可以把这个复删掉,但是不删掉也没关系啊,我们只要知道就是name代表的就是这个,呃,我们要显示的这个名字,OK,确定。
08:17
好确定好之后呢,我们接下来来到这个这个这个内容这里啊,我们到底要显示什么内容,是不是我们不是要显示KG范头,而是便利的每一项的值,那我就用什么,这里要注意就是变力的时候呢,它都是item。便利的元素就是item,遍历的下标是ins,所以在这里我们可以给当前的文本内容啊绑定一个JS表达式,表达式呢就是用item.name我们要渲染的就是item.name。OK,绑定一个表达式,好,那么下面我们就可以来看到效果了啊,左边呢,就应该呈现一个这样的组件,并且塞入相应的数据。而这时候呢,在这里是调试不出来的,我们必须要征集调试才能看到效果。
09:02
哎,我们质量滴一下。呃,OK,这里它没有呈现啊,可能是高度太高了,它被挤走了,我们还需要让整个元素是一个可以滚动的区域,因为它现在超出整块屏幕区域了,所以说我们需要,呃,给整个内容都包一个sc view组件啊,View组件来。包一个view对吧,然后呢,这些内容这些不需要滚动的,就放最外面啊。移动一下位置。不能拖出根节点,没有拖出根节点OK在这啊,然后这些东西都拖到sc view里面。那么其中呢,我们要做的就是把它这个背景什么给去掉啊,去掉之后我们再来增量更新一下。好了啊,这样的它就是一个这样的一个可以滚动的区域啊,是没有任何问题的啊,可以滚动的区域。
10:03
嗯,那么我们这里唯一的一个小问题就是。我们来看一下。呃,第一个就是咱们的这个没有出没有出现啊,我们来看一下这里是不是哪里写错了,看一下这个世界。Get by ID。然后呢,获取到这个元素,我们通过元素的一个load方法加载数据啊,加载的数据应该是carry这个数据啊,这里加载数据错了,它得是一个数组啊,所以说要去掉这部分,然后下面要多少一个括号。OK,上面这里少个括号,OK,这样才是正确的数据啊,前面加载数据加载错了,点击确定好了,这时候应该就没问题了,我们再次更新一下加载数据加载错了得是数组。哎,你看是不是左边就有这个内容了。对吧,就有这个内容了啊,那么这个滚动条呢,同样的不需要,所以说我们可以找到这个list组件。
11:05
在属性这里,我们可以让它的收这个SC把它调为false,然后再增量更编译一下。那么这样呢,我们先滚上去啊,那么。还有就是最外面啊,它有一个这个滚动效果不太好啊,我们再找到最外面的sc view把它这个。这个弹弹性啊,给这个是否能弹动给关掉,我们再次量一下。OK,往下走,哎,这样的话呢,我们就看到咱们的这个数据呢,就没有任何问题了是吧。好了啊,那么这个就是整体啊,我们最后再看一下,检查一下,就是最后的这个内容呢,它是被挡住了,看到了吧,被挡住了,所以说我们需要给它加一个。一个喷Ding效果,这样的话呢,才不会被挡住,而且下面这块区域的也要被。下面这块区域也不能有什么pending啊,所以说我们要去看一下这个safe area,我们这里呢,还包括上面要顶住啊,所以说把整体的样式我们还要做一些小小的调整。
12:10
找到这个shift啊,我们不应该用shift,应该用六组解啊,所以说我们先改,把它改成六。为什么呢?因为我们这个内容,这个背景图是要顶到最上面去的,而不是顶到下面,所以说我们把它改为view字体。OK,改回了V组机之后呢,它就顶上去了,那么下面这里还是空隙啊,我们要研究一下是怎么回事。来找到这个缪键。样式高度能百分百。对吧,我们。憋一下。好,上面这里倒是。没有问题啊,上面这里倒是没有问题,但是。
13:03
下面这一块呢,我们来看一下,看一下这个高度。下面这个swaper这里呢,我们就不要给这个margin,不然的话呢,看起来呃有些别扭啊。那我们找到这个margin呢,就把它的margin调为零。调为零,我们试试看一下它是不是会紧凑一点。对吧,这样就会紧凑一点啊,这个内容会紧凑一点好呃,然后呢,最最最下面呢,它这里会有一个灰色的区域啊,我们来看一下是不是哪里加了喷。哦,这里加了个pending效果。我们再看一下这个sc view view没有加,然后呢,再加上最外面的view,最外面的这个view的话呢。他加了一个margin的一个复食效果,我们把它删掉。
14:11
OK,呃,我们再来编一下。好了,这样的话呢,底部才会是才是正常的,底部是正常的,但是咱们的这个这个区域呢。还需要发生一些变化,这个区域就应该有个负10PS了。啊,10PS。OK,这样的话呢,它才会跟下面稍微有些精细,对吧,然后呢,这个我们的这个图片,那么也需要调整它的一个位置,那么他也应该是10PS。做一些细微的调整啊OK,它也上去了,然后最后呢,就是这个滚动区域呢,它下面应该是打开的,所以说我们找到这个整个滚动区域。
15:05
我们看一下是哪个view啊,是这个view OK,它应该加个pending,加个pending button。Paint的话呢,是它整个高度是50加十,就是60啊给个60P。我们给他加了个painting bottom为60PS,那么下面我们再次编一下。OK,那么这个时候呢,我们最后一个才能够完美的显示,就不会被下面这块区域给挡住了啊好了,那么我们就把左边这个导航这部分给完成了,那么下面我们只要完成右边导航部分就可以了。来右边的部分呢,其实一样的,我们放一个类似的组件list view。啊瑞已经犯了啊,然后在这里面放个cell。好啊,我们来看一下这个cell是不是发错位置了,对,移到下面去啊,是下面这个第。
16:05
呃,我们来看一下整体这个结构。它应该加到下面这个第三里面。那没有加上,我们就把它给删了先。OK,我们再次拖拽一个cel组件。拖拽到下面这个第四中,OK,这一次就是拖对了啊。拖了之后呢,我们接下来去对它进行调整好整体这个内容呢,CL组件呢,它是这样的,它是。这是一个整体啊,然后上面是一块区域,是一个头部对吧,下面是多个这样的。列表下面是多个整个列表,大概是这样的一个数据啊,上面是个头部,下面是多个列表,对应数据呢,就是还是这个数据啊。
17:02
对,这个数据对应的就是这个。Carry数据,比方说你看这是一个carry数据,对吧,也是这个数据,那么上面的头部显示这个内,然后下面列表通过负的去编历遍历生成。所以大概结构也是这个样子,好,呃,所以我们来写啊来写。它整体上面是一个这样的文本,我们来把它加一下。好,这个文本的显示的内容呢,我们先写死,后面来改啊。OK,写完之后呢,我们调一下样式,它的大小呢,我们跟左边。一样吧,14P。然后呢,它的高度呢,我们也调成50PS高度调成50,然后让它center居中。
18:01
呃,不是这个居中啊,而是它的这个文字要center居中啊,不是不是居中到这里,而是垂直居中啊,垂直居中的话应该调行高为50PFOK,那么就调好了,然后呢,这个内容他们之间有些间隙啊,我们不能调的这么大,所以说这个80%的这个绿色密容器呢。我们要调一个pending。Left like10PS啊,这样呢,他们就会隔开一个间隙,不会靠太近,好,上面这部分呈现了,接下来下面这部分就是一个整体啊,是一个view。好,下面这个view的话呢,它就是可以遍历生成多份了,所以说这个view将来是要去遍历生成的,好这个view里面左边是张图片。好图片投进去了,图片的大小呢,我们暂时先设一百一百,未来再看要不要改成多少多少啊,先设置个一百一百再说来,然后呢,它的。然后这个东西它老是挡住啊,所以说我们可以怎么办呢?可以先把它隐藏掉啊,我们可以点击隐藏,把它们隐藏掉,这样我们好开发我们想要的这个内容,点击这个眼睛就隐藏掉,想要显示再点回来它就显示了啊。
19:13
我们把它隐藏掉。嗯。我们再次来看一下,哎,他这个隐藏是不是出了bug。OK。OK,好,我们回到这个图片这里啊,图片呢,我们给个地址。它其实对应的就是那些商品图片啊,所以说点击斜看,点点斜杠,Image下面的shop下面的每一个故事。第一点。JPG。OK,那么就呈现了,哎,下面这两个怎么样出现了。OK,把它们先隐藏掉啊,然后呢,接下来我们再去右手边,右手边呢,它就是一个整体,当然你不给整体啊,要给整体啊,不然他们不会水平排列,我们写整体,这个整个木呢,是一个水平排列的一个效果。
20:12
好吧,每次做的话呢,他们都会,呃,都会显示出来,没关系啊,我们先接着写,然后下面这个呢,我们一起来看。嗯,右手边呢,我们需要写这个内容。这样我把它复制几份啊,复制几份,待会儿呢,我把上面的给删掉就好了,所以说我们在下面直接写就好了。呃,在这个加上一个标题。右边呢,我们先要加个容器,然后再加标题,因为右边是垂直布局。好运容器已经来了,然后再给他一个test。展示。
21:06
好啊,我这里就写了一下正功本,那么它的大小。和和颜色。对吧,和自重是要加粗的。OK,它呢就加粗了,那么跟左边都有些间隙啊,所以说我们找到这个整个view啊,整个view可以弹到个margin left那个十撇。好,然后呢,接下来下面有三个park列表。那么我们也需要换个容器,因为这个三个列表是水平排列的。比方说两份啊,随便写几个。OK,然后它的这个颜色是一个灰色。字体肯定是12PS。
22:00
然后呢,是一个灰色,同时它有一个这样的一个圆,圆包着它的一个背景啊,所以说它应该有个喷。盆底呢,上下呢就二左右就四吧。OK,这样的一个pen,同时我们给它一个背景色和一个圆角。圆角的话呢,它要彻底圆,因为是12PS,所以说给个12吧,同时它的要给一个背景色,背景色的话呢,我们给个CC。好了,大概就这样的,然后呢,我们只要让它里面的这个view区域啊,我们点开点进去一点点去瞧一下。让里面这个没区域。就是这个区域,那它这个水平排列,那里面的元素水平排列这样的,它就不会去占这么多份啊,它就会只会占这么一点点,这样看起来就会稍微的好一些些啊,未来这个只要整多份就好了。接下来下面呢,又有一段文字,又有两个文字,所以说下面又是一个容器,又是两个文字。
23:04
又是一个容器,又是两段文字。文字内容呢,就是月兽。颜色的话呢,我们都灰色,我们都直接这这个颜色啊,后面我们如果想改颜色的话,你自己再改。然后再找到这个容器对吧,这个容器它应该要水,所有的内容都是水排列的。OK,因为它接下来还要再塞一个东西,塞到这个容器里面,OK,那么下一个内容呢,就叫呃好评,好评度好评率。喂。那么这里就有了啊,然后颜色也是灰色。但是他们左右边应该有些间距,所以说给他了一个Mar right那个十片。
24:04
好了,那么我们这一块就这一部分设置好了,接下来下面又是一块热容器,又分为一左一右。OK,那么这个B组容器呢,一左一右,左边是这一块,右边是这一块啊,它们是一个水平排列。但是他们的布局是space between对吧,Space between,所以说我们接下来再给它到一个下面一个左边左右一个容器啊,那么这个容器在这里,我们看一下是不是位置上有问题。对,的确有问题。应该在这个view里面啊,在这个view里面OK,那么左边这个容器的话呢,它的它布局是水平排列,所以说我们水平排列,然后里面放1233个文本,因为这个价格的这个大小更小啊,所以说放三个文本。OK,第一个文本。
25:02
是一个代表钱的符号。然后呢,它的样式就大小就小一点,12PS颜色是red红色。OK,第一个就好了,然后呢,接下来再来第二个。复制一下第二个,第二个的话呢,它的它是具体的一个价格。然后它的大小呢,要为16 PS字体更大一点,对吧,这是第二个。好,呃,然后在右边还有一个文字。那么这个文字的话呢,它需要在这个容器里面啊,需要在这个容器里面,OK,这个文字的话呢,它是一个灰色的。而且是直接带价格的。啊,其实他这里还要把这个线划掉,后面我们这里这个样式呢,在这里没法调啊,后续我们呃去另外的地方调就好了,然后它们之间呢,要往下靠着,不是往上靠,所以说我们找到这个整个容器。
26:12
这个容器啊,整个这个容器,他们的整个布局方式。是要靠靠这个N的布局啊,去靠下面贴边才行,OK,然后这个样式我们看一下它的颜色没有改成功啊。OK,它应该是个灰色的,没问题,然后他们之间。要有些精细啊,有些精细,所以说我们找到这个红色的文字,给它一个marin。那个5PS啊,稍微有些精细,不要隔得太近了。好了,然后呢,最右边的这里需要一个这个加号啊,最右边需要一个加号,所以说我们拖个图片拿到这个容器中,对吧,来到这个右手边那么大小的话呢,为这样16PS就好了。
27:02
OK,他对的图片是。Image下面的说下面的偏距。OK,这样的这个加号就出来了,然后整体整个容器它们是要的是要。对吧,是要对齐,是center的方向的,所以说我们再把它居中,OK整体就好了。然后呢,每一个容器呢,距下面都有一些边距啊,都有一些边距,所以说我们找到整个view容器不是这个是整个这个view啊,他们距下面应该有一个边距,Marin为10PS。OK,去下,别去之后呢,整个这个image的高度啊,应该要。更大一点,稍微的大一些,这个有点太小了啊,所以说我们再把这个高度图片的高度再调一下为一百二吧。宽度的话,我们也可以调宽一点,宽度为100。
28:01
120。POINT120,我们待会来看下效果啊,看效果好了,那么这样的话呢,我们就基本上给设置了一下咱们的整个这个数据120。呃,一百二这里是120,一百二太高了,一百一看下一百一是不是刚刚好。OK,一百一刚刚好的话呢,那么我们上面这些什么,就组件就删掉了上面这个。六次键就会删掉了。然后整个view应该放在这个view里面啊,放错位置了,放在这个view里面,OK,那么这样呢,就形成了我们大致上的一个内容,接下来我们只要遍历生成即可。那么要遍历生成的话呢,我们同样的要给这个整个list取一个ID。下来要找到它,我就叫负的利。视频列表好,取完ID之后呢,我们同样的点击空白区域,在这个API ready事件中,我们去加上一些代码。
29:05
其实这个代码一样的,我们要下载数据,设置都是一样的。所以说为了方便操作啊,大告诉大家啊,除了这里可以操作以外,它这里也说了可以切换到编辑器啊,切换到编辑器去操作的话呢,可能会更加方便一些,我们把这个data数据复制一份出来,就叫data。因为我不管是咱们的分类也好,还是这个,呃,视频列表也好,用的都是O。这样的话呢,我们呃,这个数据的时候就可以直接写data。然后复制一份。在编辑器里面写的话呢,可能你就有代码提示啊,效果上就会更好一点。好了,那么左右两边都加载了内塔。加载完对塔之后。取消啊。哎,我这个代码应该保存了吧。
30:00
OK,我撤销一下啊,看看他这里取消了,OK,这里保存OK进去啊,进去之后呢,那么这边也要按照要求去生成相应的数据比要找到这个KG范头,他也应该用表达式的值。表达式的值就是item。确定好,然后下面。往下走。下面这个view呢,是要遍历生成的,在这里有一个循环展示啊,循环展示,循环展示就是便利在GS表达式里面放置右手边的内容啊,Item遍列出来的呢,就是这个负的index就是index,因什么呢?因这个item点服的。应该就是item点负的吧,我们看一下数据结构,这个可以不要了,Item点负的啊,就是这个负的。OK,那么我们确定确定呢,我们的item就是负的,下边就是index,然后接下来呢,我们就去一设置。首先设置这个图片啊。图片地址。
31:03
点击这个图片,图片的路径呢,就应该是表达式负的点cover。咱们的图片地址是叫cover。然后呢,再找到这个标题,标题的话呢,应该是负的title。标题是抬头。好,然后呢,再找到这个。这个。两人份这里啊,两人份这里是它的例子,要进行便利。我们可以看一下这个数据结构啊,呃,Title是标题,Cover是图片地址。Orange price和price分别是这个原价格和售卖的价格,那这个是好评率对吧?这是总售卖数,下面就是它的意思,是一个数组。所以说我们这个它的例子也要变例啊,在这里有个循环展示JS表达式变出来的东西叫tag in它啊这个负的点。他的内上。
32:01
那编辑出来的就叫tag,好,编辑出来tag之后呢,我们点击这个tag。呃,点击它是不是对的,我们要要找对啊。对,就是它,我们点击它啊,刚刚这个A对这个内容来了啊,那么内容就是要显示的内容就是这个tag。好,然后呢,再往下走,下面呢,有一个叫月受对吧,月兽呢,这里就要放表达式,对应的就是我们的item点。越兽是这个total sales。确定。然后呢,下一个是好评率,那么这里就是放item点。Price rate。确定好,然后在下面的view。在下面的六的话呢,它分为两个价格啊,一个是。
33:00
一个是这个test,诶我们来点击一下是这个。限价一个是限价,限价的话呢,是这个sell price。Item price。然后第二个,第二个是那个原价。原价的话呢,是这个orange。好,呃,那么这些就足够了,最后一张图片是不需要改的,那么我们整个数据就生成了,下面我们就可以去看效果。哎,你看那么这里边它就的确生成了相应的数据啊。对吧,生成了相应的数据,只是咱们的这个这个图啊。12PS稍微有些大啊,我们做一些调整,然后整个这个图呢,嗯,没有别的太多的问题啊,然后还是这个进度条什么的都去掉,我们现在一点写,还有这个价格还没出来,我们要一点设置啊。
34:06
呃,价格没有出来,我们待会来看一下什么原因。呃,对,价格这里我们设置错了,不是item是负的,写错了。是负的。因为我们遍地生成的是负的。是负的。是负的。呃,第一个它就是一个符号,第一个这里写错了,第一个它就是个符号。解除板栗啊,板栗错了,解除板栗,然后它就是一个这样的一个。价格的话。解除绑定。要删掉这个内容,然后再解除办理确定。哎,删掉内容确定。商家内容结束办理确定。
35:02
哎,他是不是卡了。他这里应该是可以解除绑定的,但是。好像有些小问题。好吧,待会我们来调啊,那么现在我们来增量比一下的话呢,它这个价格应该是可以出来的,只是前面这个符号有些问题啊,我们要一点点调整,第一个调整呢,就是。我们整体的这个。这个它的意思,还有这个图片稍微有些圆角,我们都分别调一下吧。找到这个图片。图片有些圆角,所以说我们来到这个边框这里,给他一个识就完事了。好,然后呢,咱们的右手边。这个他个利这里有点丑啊,他丽思有点丑。
36:02
我们看一下是哪块,是这块内容。这块内容的这个他和绿色它的这个背景色有点丑啊,我们背景色调为一一看效果。OK,整体的这个颜色还是不是很好看啊。整体颜色还是稍微的。有些辣眼睛啊。他还是没有是个。颜色其实这里就是调,呃,我们再看一下是不是调错颜色了。我们调成color了吧,Color颜色是是不变的。是下面的背景。颜色要调成一。
37:03
OK,这样的话那就好看一些啊,然后下面这个价格这一块显示的有些小问题,我们最后进去里面调啊。因为它这里表达式呢,不能跟字符串拼在一起,所以说我们要进去里面调找到这个价格,这里我们前面这里呢,需要给它一个符号,是个固定的符号,这是个价格的符号,然后下面这里呢,需要多加一个价格。好,这样呢,我们看这个效果啊,哎,它就差不多呈现的这个效果是没有问题的,呃,同时这个图片大小可以再宽一些啊,可以不用这么小,我们进去再看一下这个图片。找到这个图片宽度呢,可以为一百一百四,我们看效果啊。一百四的话呢,差不多啊,差不多的这个图片大小,所有内容呢都呈现了。
38:04
对吧,然后呢,这个滚动条我们删掉。OK,同学,删掉之后呢,它这个显示区域应该就会更大一些些啊。对吧,整体差不多,然后呢,就是整个。这个这个价格呢,它是要加一个划划线的,对吧,加个划线啊,我们最后呢,给它加一个划线。来找到这个价格的这个样式往下走,我们需要给它加个test。Decoration。喂。Under,不是。我们要给它加一个加一个样式啊,加划线的。
39:01
来。OK,那么这个线呢,就呈现了啊,所以最终呢,我们整个这个下面的基本样式结构就已经全部完成。对吧,非常的完美,没有任何问题。左右两边都可以滚动啊,左右两边都可以滚动。好了,整体呢,我们再看一下有没有什么问题的地方。呃,整体应该问题不太大啊,就是因为这个图片脓包图没有和上面有些间隙,所以说靠的稍微有些近,所以说我们还是最后把它这个间隙加一点点。找到这个轮播图区域。外,Per还是给他加工了。这样的一个妈。那个10PS吧。好了,那么加好之后呢,我们最后编一下。有了这个10PS呢,它就不会把整个区域跟它对接上了,对吧,就会稍微有些空隙,稍微的好那么一点点好了,到此呢,我们就将short页面的静态组件全部完成,我们最外面容器没有用c view啊,因为用c view的话呢,导致我们背景图没办法撑满这块区域,下面有留白,导致一些问题,所以说我们直接用普通的日子结,它就会把整个区域撑满,这样看起来呢更好看一些啊。
我来说两句