00:00
下面呢,我们来完成硕店家页面的一个数据展示。我们一起来操作一下,看怎么做啊。呃,上节呢,我们这个数据展示呢,我们来看一下这个叠加页面的云代码,我们是直接把数据给写死了。我们是直接从这个接口文档中复制的一个数据啊,那么其实他应该要发请求去做啊,所以接下来我们来发请求获取数据,然后再展示,然后再展示,我们下面一起来看该怎么做啊啊,因为这里涉及到发请求,所以我们不建议大家用这个可视化编程工具了。因为在那里写代码呢,很痛苦,没有提示,且格式化也不太对,看起来很别扭啊,那么涉及到数据比较大的时候呢,去那里改就非常的不方便,所以说涉及到发请求这个过程呢,我们建议还是回到咱们原代码这块去操作,如果你要改结构,改样式诶,那你可以回去再去操作啊,这样会更方便。
01:04
好,那么我们来到这一块呢,我们去发请求,那么接口文档呢,我们还是要去看一下。完毕,这个接口呢,整个接口地址,那就是这个它需要一个参数,就是说排ID。整个接口都在这儿。下面我们来发请求,方式是get。Apil。第一个是一个请求的对象,第二个是一个函数。对吧?啊,请求对象里面呢,我们要放请求地址URL。注意这个收盘ID呢,我目前是写死的,未来要改的,但是我先写死,请求方式是get。好了,后面呢,跟着一个请求。咱们的一个响应的一个回调函数啊,如果it有值说明请求成功,L就说明请求失败啊,请失败的话呢,通过API点。
02:02
Alert,我们就简单做个提示,提示一下这个错误的原因。好,呃,那么没问题的话,那我们就要对这个数据做操作了。首先把两个获取放在上面。两个获取放在上面,然后呢,我们接下来就要调这个方法去加载线的数据。请求成功叫加载数据,那么加载数据的是哪部分呢?对吧,我们看一下这个接口啊,加载的是请求回来的,这个叫carry这个数据,所以是re的carry。那么剩下部分我们也不能直接放在这啊,剩下部分呢,我们要更新成一个对象是说。更新成一个对象。对吧,剩下部分我们要这四点。因为我们还要展示其他商家数据啊。
03:00
剩下部分更新到这里,这里是加三。这里面保存的是店家的数据。对吧,然后这个加载的是左边分类数据。下面加的是右边的那个食品列表。好啊,店家数据有了之后呢,我们下面就可以去一操作了啊。首先背景图我们在这里可以直接写。我就不去那边改了,那边改的话也可以啊,那么用的是我们的说的点。嗯,它的一个背景图啊,我们看一下背景图是叫什么名字来着,是叫shop image。Back是固定的,这是它的标题。就用叠抬头。然后往下走,这是它的start,这是固定不变的,然后还有它的评分是score。
04:03
然后呢,还有它的这个logo image。就是这个logo image。对吧,然后还有它的描述,下面这个就是它的描述了。然后剩下的内容呢,就没有了,还有这个图片列表来。Waper的话呢,也要遍利展示啊,我们可以在这里直接给大家写v for,遍利的是咱们的硕里面的car。Lisa。编出来呢,就叫image吧,因为就是image地址啊,然后呢,要写渲染的内容,就是这个image。好了,呃,那么我们这里就写完了,但是这样的一上来会有个报错的,这里就是报错,原因是shop careful this,一上来,一上来shop是个空对象。
05:00
啊,一上shop是个空对象,那么它去便利careful this就会报错啊,所以说我们一上就给careful list是一个空数组,这样的话一上来遍历就不会报错,才可能会存在相应的数据。我们最终对比一下,看一下这个参啊是castous image啊,不是的意思。我们一定要把这个参数写对啊,不然的话呢,他在病例展示的时候就会出现报错,那么我们最终效果就呈现不出来。哎,在哪呢?轮播图在这儿。好,呃,这时候我们就可以看页面效果了。对吧,现在就是我们这不是我们写的,你看这个描述这里就知道它它的确发生了变化。这里呢,就是我们最终便利生成的效果是跟之前是一模一样的,没任何区别。
06:01
呃,但是右手边这个,我们发现咱们的这个。呃,内容呢,它它有点没有撑开啊,没有撑开呢,是因为我们右侧这块区域呢,它是被内容撑开的,标题内容只有这么大,所以整块区域就变小了,而我们希望它整块区域变得更大,所以说我们最后要把这个样式调一下。还有就是这里有些内容没有展示出来啊。这个评分什么的没有展示出来。我们看一下是不是啊,因为他们都写成了item评分没有展示出来。OK,评分这里才有啊,这里第一个是总销售数。销售链。下面是好评率。不管是太太这个17,还是T这个18,我们的size都调成12P。
07:11
嗯。好了啊,这样的话呢,他们就呃可以显示没问题啊,在这个上面显示。我们再看看还有没有什么其他问题啊,刚刚那个区域,它下面的区域应该会掉下来,对吧,下面这个区域它没有把它撑满,我们来找到这个整个这个内容。它呢,整个cell是分为善。然后呢,接下来。右。右边下面下面呢,是一个左一个右啊,我们找到这个这个样式。它呢,就是一个magic button就没有其他样式了,OK,没有问题。
08:01
这个十的话,我们看一下这个十就是肉布局没问题,我们接下来找到这个61。61呢,我们加一个FLASH1就好了,FLA1就是它会自动的占满赋予空间,对吧,所以说后面我们来看到下面虽然。你看这个文字它没有占满,但是它这个加号的确是放到这个最右手边的,所以这样就没有问题了,然后然后整个内容呢,应该是要靠下的啊,不是靠上的。我们这时候还发现它整个这个价格呢,都靠上去了,应该价格是要靠下的,所以说我们最后这个价格这里要做一些调整。来如果不抛开定位元素来看的话呢,最简单的调整就是我们来看一下这个这个右手边这块区域啊。嗯,左边是图片,右边是整个view对吧,右边是整个view OK到这好,那么我们只要让它呈现一个这样的。
09:05
上面是一个,下面是个表,让他们就可以这样达到这个效果了。上面是个,下面是个病。OK,那么这样的话呢,目前看是跟之前没有任何区别,然后接下来怎么办呢?找到这个view。好,呃,找到这个之后呢,它让它的这个just connect为space between。这样的话呢,他们就会顶到最下面了,你看就在下面的时候,它就会顶到最下面了,是不是。然后这个边距的话呢,可能你还可以再调的更好一点,我们这里就不一调了,那么整体呢,就差不多达到一个这样的效果。整体就达到一个这样的效果,它就靠下去布局了,没任何问题。好了,那么这里呢,我们就完成了数据的动态展示啊,数据动态展示。
我来说两句