霍常亮淘宝客app开发系列视频课程第38节：首页列表多图列表效果实现原创

好的，那么我们上一节课呢，跟大家讲了，关于类似右侧这种，咱们是单图单标题这样的一种类型格式的生成。那如果说我们。一条消息里面有多个图片啊，那么我们应该如何去实现，所以说我们这节课要带着大家走一遍呢，就是关于一条消息咱们有多个图片，然后怎么展示出来。初步的一个计划呢，就是类似于这样。上面是。图片。图片图片图片图片多的图片，然后下面是标题，然后标。啊，大概呢，是这样的一个排版布局。我们呢，还是找到卡片啊，List car所对应的组件里面。在这里。我们把整个基础组织咱们复制一份。

之后把上面的这些咱们暂时给它屏蔽掉。下面。我们复制一份。我们。做一个备注啊基础。基础组件的多图的模式。那么假设啊，我们是有三张图片对吧，就是一个消息里面咱们有三张图片，那么我们先得找到这个图片的位置，咱们上面的图片是在这儿。咱们先把它。剪切掉，咱们预计呢，是希望把标题展示在上面。然后把图片展示在标题的下方啊。

没错，这里是标题。然后。我们先把图片放在下面。然后我们现在先保存看一下效果，如果说你单纯的这样调节呢，它只是把图片从左边换成了右边。那我们再来换一个位置啊，咱们多几个位置，咱们测试一下一下，比如说放在这里它的上面。我们讲的就是把这个。开头放在最上面，然后是图片，然后是下面的标签跟浏览掉，我们现在保存看一下效果。

啊，这样的话基本上啊，满足了我们的一个初步的需求，但是呢，假如说我们这里有多张图片对吧，有多张图片的话，咱们可以整一个后循环啊。咱们把它。复制，但是说你要是这样手动写的，我们也可以看一下效果啊。这样的话是看不出来的，因为我们有啊。竖向的挤压呀，然后这个就看不出来，但是呢，我们可以以一种。复习完的方式。比如说咱们。有呗。把这个图片放在这里边。然后呢？咱们来一个we gone for。

Four啊。循环。咱们之前说过啊，所有的循环呢，无外乎就是什么in什么对吧，In后面呢，可以接一个数组或者接一个数字对吧，那么假如说我们写个三，那么这里呢，就是把下面的这个图片呢，咱们循环了三回。啊，那我们现在简单的保存一下试看效果。啊得这样的话，你保存的话连图片都不显示了。然后啊，我们。等于。

之后咱们再来一个class，然后咱们可以命名为，嗯，它的上一集是。这里对吧。那么我们现在呢，就是按照多图的模式去写的，但是呢，咱们关于这个class的还没有详细的一个描述啊。那么我们现在呢，图片看不到，其实这里是有图片的，可以审查元素，但是呢，因为它被挤压了，所以说这里的图片呢，咱们看不到，我们可以在顶部呢，再给它一个。

现在这吧，现在一个。新的一个样。我们呢，想要让它有两类，一个呢是它，还有一个呢是它，所以说呢，我们应该把它放在它的里边。对吧。之后我们开始撰写这个类的相关的信息，我们把它暂时的复制一下，这边点击一下保存。之后。咱们找到啊写类的一个合适的位置。这是east car啊，那么我们可以在这里。

嗯，咱们为了方便观看的，咱们先把用不上的给它折叠掉。把这打开，然后这里我们一个大括号。之后呢？这两个。都要对他。相应的一个。

调整。是在它的这个底下的时候。一个对应的调整。那现在呢，只是稍微挪左边了一点，然后继续写。他们一个盒装的容器。

然后来一个编剧。顶部的编剧。宽。百分百。高。暂定啊，给他一个70。啊，这里呢，还得我们自己手写，咱们当时给他命名是image线看一下。店里的是这个名字。

对吧。我们这个。之后啊，我们。然后再来一个设置圆角的。然后是溢出隐藏。

之后。他现在还有一个位置的一个。标签的对吧，我们还要给他写一下。然后这里呢，就宽和高都是百分百。好，我们现在在看一下。啊，那到这个时候呢，我们就已经可以实现出咱们这边的图片，刚才好像展示啊，这里呢，是三张图片，对吧，因为我们只循环了循环了三，那么如果我们循环四这里。这四个。

然后呢，我们看啊，它的左边这边你看左右跟。两边不一样，这边要多一点，这边要少一点，对不对，那么它呢，多出来的就是这些中间的这个间隙，所以说我们希望第一个咱们不给它间隙。对不对，那我们在这就。可以加上一个关于它的一个副元素的一个设置。啊，我们现在保存一下。对吧，那么它左边跟右边这两边的一个间隙看起来就一样了啊，因为我们刚刚用了一个零，这边就不再有一个间隙了。

然后呢，左边是OK的，但是下边我们看它还是挨的太近了，就把这个标签在上边挨上了，那么我们呢，就想让这个标签的。上边呢，有一个间隙。对吧，然后我们找到标签。那么我们要加的话，肯定不能说光加他，不加他这个得一起。然后如果说这两个一起的话，那我们就根据可以加在上面这一层对吧，那我们可以在这里做一个。限制啊，咱们可以加上一个呃，最底部的一个边框之类的限制。

然后我们来看一下它和上面哪一个是同类的啊，是和这个image是同一个。内的啊。是同一同一个位置的。所以说我们要加在这的话，就可以加上一个呃负元素。或者我们直接这样跟他不是同类吗，对吧。同一个级别。然后。到顶部的边框，比如说咱们来一个实体叉。好，我们现在保存一下。没有效果吗？啊，我们来再检查一下。那么我们为什么没有生效呢啊？

哦，知道了，他现在呢，你这样的话还是在这个。大的你妹的里面。对吧，因为我们现在是要把这个字。把它独立出来啊。应该和你妹是一个几率。和你妹是一个同一级别的啊。不能夹在他的下面。在他的下面。然后我们再讨论一下。这个时候下面就已经有了一个间隙了，标签跟上面的图片就已经有了一个间隙了，对吧。那么我们现在呢，两种方式就说已经实现了啊，我们把基础的这个多图模式，咱们把它。解开。浩文。对吧。这是上面的单的，这是多的。

那么我们在实际调用的时候说究竟是单的还是多的，那肯定是有一个参数来控制的，我们可以在最下面啊传一个参数进来。的都是相士。我可以在。里面传一个参数进来。咱们之前说过啊，传菜用。对吧，然后一个大括号打开，然后这里面呢，就可以写咱们要传的一个，呃，参数，比如说。

那么类型呢，是字符串，然后默认的是咱们叫face。那我们现在保存一下。啊，这里有个报错，这种报错十之八九就是小逗号。看一下。Eight。有事。对吧，应该是这后面加上一个逗号。OK，没问题了，然后呢。咱们在顶部。在这里判断。

在什么情况下会展示这种，呃，叫做基础类型，对吧，我们刚才写的是负的。三个等号就是在如果判断里面写的。然后。那么现在读法呢，就是说当你传进来的参啊是base的时候，它就会。以这种形式进行一个展现。然后呢，我们再给这个多图的模式，咱们也来一个判断，对吧，就是它。

那现在呢，就是默认展现的方式是base，然后这边呢，展示的也就都是这种单独的这种模式。那么我们在这头对吧，在看他传他传进来的时候。啊，我们在这边呢就可以。加上一个。参数展示对吧，比如。我们。写的是负的。

然后你可以写。默认的就是贝对吧。默认的就是。那这样的话。写个写个二。默认的就是这。然后呢，如果我们再加上一个。这里我们不写，被子我们写。之后再保存。对吧，那么上面的这一这个就是。单图的下面呢，就是多图的，然后究竟什么是单独，什么是多图，咱们由这里的一个穿参就可以判断啊啊，那么这节课呢，我们所讲的就是关于这个单图和多图的一个说明啊，那么。后期咱们也可以根据自己的需求进行个性化的调用啊，你需要什么就用什么。好的，那感谢您的关注，我是霍常亮，这节课就跟大家分享到这里，拜拜。