霍常亮淘宝客app开发系列视频课程第37节：首页基础内容实现原创

哈喽，大家好，我是郭尚亮，我们继续前面的课程，在上一节课呢，咱们已经做完了顶部的导航，还有一个标签啊，或者是叫做分类选项法，那么接下来呢，我们要填充的就是下面的这个内容，对吧？然后我们来看一下幻灯片，我们预计着呢，它会有两大部分，第一大部分呢，就是最外面的这个框框，然后里面呢是几个小框，这几个小框呢，就可能是有几个文章，对吧？然后将来呢，我们肯定是来一个循环啊，一个微后来把它们都循环出来，第一个第二，第三个第四啊，以此类推。好，那么我们现在先来实现一下外面的这个大框，对吧？这个呢，我们先要找一下它的位置在首页对不对，那么首页呢，是在咱们的这个选项卡下面，选项卡是这个table，那么我们就要在它的下面进行一个填充。我们在这里随便输入几个字对吧，然后我们点击保存，哎，你会发现啊，没问题，这里能够有这个相关字的一个展示，那么我们多写几个，咱们来一个像我们之前。

讲这块的时候做了一个后循环对吧。好，那么这块呢，我们把它先。取消屏蔽，然后我们点击一下保存啊，你可以看到有这些数字，那么我们也是老生常谈的一个非常简单的一个for循环，微高复循环，然后是啊1TEAM，然后循环到100啊从一开始对吧，然后把它全都输出来，当成一个变量全都输出来，那么这个时候呢，我们会发现你把它往上一拉的时候，咱们的导航虽然说是保持了固定，可是你这个选项卡咱们辛辛苦苦写了半天，他也没了，对吧？它也跟着上去了，这显然不是我们想要的目的，所以说到这儿呢，我们想要的效果呢，就是希望能够它也在上面保持固定，对吧，它跟这个导航员都固定，那么这样的话我们应该怎么写呢？那么这个时候我们可以拿一个studio对吧，我们之前也讲过，就是一个呃，滚动滚动的一个。

卡滚动的一个块对吧。这个呢，咱们暂时先放着啊，咱们先写一个外边的一个大块啊。这里呢，我们可以起一个名字啊，比如说就叫。那么我们因为是要用这个。Q view的组件对吧？呃，我们之前也讲过，你在这里呢，可以看一下啊q view呢是指可滚动视图区域啊，用于区域滚动需要注意啊，在web view渲染界面中区域滚动的性能布局页面滚动对吧？那么我们就用SQ。C啊，但是作为一个class的类名。OK，之后呢，咱们再来一个。

的UV，这个时候呢，你在下面就可以看到啊，有一个快捷快捷键啊。状态触发字符对吧，啊块我直接双击，然后到这里呢，我们就会看到有一个啊Y，那这个Y呢，对应的就是XX是横向滚动，Y呢就是纵向滚动啊就是这个意思是纵向滚动。对吧，咱们这呢是想让它纵向不够。然后在这里面我们要写的是什么？咱们直接把它装起来行不行，我们来试一下。对吧，没有问题啊，没有报错。然后呢，我们现在。讲了一个滚动。接下来就是要让上面。

让它不动对吧。我们来开始给这个这个类是一个内容的填充。那么我们应该把它加在哪？对吧，我们先把它复制下来，咱们呢，看一下这一块是属于。什么叫模板块对吧，下面呢是叫脚本块，然后再下面呢，这个叫做样式块，这个是因为我们调用的是SS的这种。博士这个我总觉得这个名字起的很不吉利啊，好，那么我们现在在下面。先定义一个配置对吧。然后打个号。这个配置呢，指的就是我们的这个页面。之后呢，我们先给人家设置一下高H。

百分百的高度。然后再来一个展现方式。这个呢，咱们之前也用过很多次了啊，它呢就是说使用的是这个弹性布局。看弹性布局，然后我们保存一下，看一看有没有报错啥的，一般我们写的行多了，经常落个逗号，然后右边就会报错。我们把上边啊这里的content改成后。然后下面在下面。咱们这就可以点后。对，没有出来吗？没有出来我们手打一下吧。

不对呀，我们上面明明已经定义了home，他这里应该会出来。可以哦哦，应该又放位置了啊。空行多了就容易换错位置啊，那我们这里点com对吧，这个时候出来了。啊。之后我们也是来个弹性布局。D。嗯，然后我们再找一下它的这个排列的方式。

啊。那么这个命令呢，这行代码呢，也是一个新的东西啊，咱们之前没有讲过它呢，指的就是在弹性布局里面，我们给它一个竖着的进行一个排列啊，我们来看一下这个幻灯片。它呢可以分为有四种值对吧，我们现在选的是第三种。对不对，它呢是指主轴与块轴方向作为默认的书写模式，即纵向从上往下看，这顶对齐啊，你就看左边这个图，就是这个样子，咔咔咔就是这个样子。也就是我们想要的效果啊，一块一块的是竖着拍。然后其他的呢，就是取反对吧啊，横着排啊，取反啊，就是这个意思，然后我们现在所想要的就是竖着牌，大家只要知道这个命令是指的是竖着牌啊就可以了。

然后我们。之后咱们再来一个边框。红色的边框。呃，还不是我们想要的效果对吧？它就变得比刚才还要丑了啊，直接把上面都隐藏了。啊，SYD打错了。啊，这里直接写一就可以。

好，我们现在呢，虽然说上面还是丑啊，但是我们现在呢，已经可以看到有这个红色的边框了，对吧。看到有一个红色的边框。然后呢，我们这里啊，这个好像之前也没出现过，那么它是什么意思呢？我们来看一下幻灯片。呃，冒号等于一，它的意思呢，就是说让所有弹性。和模型对象的子元素都具有相同的长度，而忽略它们的内部的内容啊，那么你只要知道这就相当于是一个平分啊，就是大概就是这么一个意思就可以。那我们给他了一个带弹性布局拆分，应该应该是没有问题，为什么上边给整了。诶，怎么又是一了。

哦，是这样啊，这个我们最上面这个忘记删除了啊，当时呢，我们留着它就等于说是循环了两次啊，我们这个可以把它屏蔽了，然后再保存一下。啊，删除之后呢，是只有一个循环了，然后边框也出来了，但是我们这里。还是不对呀。顶部可以挤没了，那我们再来看一下是什么原因啊。时刻，我们并没有去触碰到上面。有没有可能是因为我们这里的class是空，和之前class冲突了，我们把它删掉？然后我们保存一下。再来刷新一下。还是没有。

那这样啊，我们暂时呢，先把它屏蔽掉啊，我们继续往下面写，可能是有一些类冲突了，没关系，我们先暂时给他屏蔽掉。

我们在上面这里再建一个class。之后咱们对它进行一个定义。绿色。哦，我们在这里的话，它的上一级。是school这个类我们没有写对吧。

这个类我们还没有写，我们先把它写上吧。先把它写上，然后我们再写它里面的。下一集的类。啊，那我好像明白了，那刚才这里。可能就是因为我们上面这个类没有给它进行一个设置，所以说这边。就会出现一个把它给顶上去啊，然后我们先对它进行一个设置。这里呢，我们可以设置。是。

这样我们先把它恢复一下。我们现在先设置一下它，然后是。Overflow。超出的部分咱们给它隐藏。开的。诶，这样就可以了啊，那刚才呢，就是因为我们放弃设置上一层的K啊，然后呢，我们。这样的话就可以了，对吧。好的，我们加上一个溢出隐藏啊，然后呢，我们这个位置的错位就解决了，然后呢，这个溢出隐藏它是什么意思呢？我们来看一下幻灯片。呃，给一个元素中设置了溢出隐藏，然后呢，那么该野元素的内容若是超出了给定的宽度和高度的属性，那么超出的部分将会隐藏，不占位啊，不占位，所以我们才能保证它不会把上面那个给挤上去，对吧？咱们要把它删除了，就会出现我们一开始所说的给挤上去了。

对吧。然后我们加上这个移出隐藏它就正常了。再下面呢，我们想一想，还能放一个什么。Order books。然后呢，这个呢，Both sing，这个咱们之前也遇到过，对吧，那么我们再看一下。属性，这个属性允许您以特定的方式定义匹配某个区域的特定元素，比如说啊，您需要并排方式两个带边框的框啊，可以通过这样设置。

传令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中，对吧，就是我们在这边展示着把这个东西放在那个框框框里面啊。然后我们这个时候写完了上一层，然后就开始写这里的下一层了，对吧。那这个时候咱们不能在括号外边对不对，要不然的话他就跑到同体级了，然后我们在这里。正好加一个大括号。这里我们要设置的啊，就是它对吧，因为我们现在你看你想滚都滚不了了啊，滚动滚不成了。

然后呢，我们也是宽度百分百。然后展现方式。啊。这个。容器。之后啊，我们。这个咱们上面也遇到过。这句是什么意思来着？我们来看一下旁边。当它等于的时候，主轴与块。方向作为默认的书写模式，即纵向，说白了就是竖出来对吧？那么我们现在是想让它竖着排。所以说FL。等于C。

啊，然后我们现在保存一下。现在呢，变化还不大。那么为什么我们现在还是不能滚，为什么啊，因为咱们刚才写错了对吧，这里呢，这竖向那么应该控制是它的高对吧。好，我们再保存一下，诶，这个时候你会发现它已经可以滚动了，对吧。好，那么现在呢，我们已经把这个滚动。上边固定这个功能已经实现了，对吧，然后呢，我们要看一下上面，你看咱们包括这个导航，还有水电导，咱们用的都是都是组件，对吧，那么它这里咱们是不是也能够用组件。用组件的好处就是代码你看，诶看着就两行，看着多清爽。那我们现在直接把。啊。

剪切，然后我们在组件中进行一个粘贴，咱们呢应该还没有创建这个组件呢，对吧，我们先创建一个组件。在这里。我创建一个组件。新建组件。然后下面勾选创建同名目录。呃，可以选用一个。然后呢，这里我们输入一个组件的名称啊，比如说就叫list。好，我们点击创建。之后我们可以看到下面这里呢，就多了一个Mr Scott这样的一个。组件对不对，然后呢，我们把它粘贴到这边。然后我们已经是有了一个这个view了，对吧，咱们自带层已经有了，所以说呢，我们可以把它默认的这个给它删掉啊，这一层给它删除掉，完了留自己的原先的一层就可以了。

之后呢，咱们就需要把这个。组件的内容，然后插到咱们这个首页里面对吧。

咱们这一行其实就是咱们的这堆12345之类的，那我们暂时可以把它先屏蔽掉啊，在这呢，我们可以整一个插槽S。打了三个字母它才出来，那这个呢，就相当于是一个插头，能够把内容插过来。那我们再复习一下啊，这个插槽它有什么用啊，它的核心作用呢，就是说咱们现在呢，它就相当于是一个主主件啊，就相一个主，看着就相当于是个词。之后呢，我们把这个。

组件咱们写在这儿之后。啊，比如说我们现在就可以写一下这个是。先保存一下。对吧，那么在这里边我们可以写一些内容。之后你这里的内容就会在V。这里边儿替换它。能懂我意思吧，插槽的意思就是说能够把这头的输入的东西，比如说文字123467，然后。在这条进行一个展示。直接就插过来，就是这个意思，就相当于将他们二者进行一个衔接。我写一下吧。

之后呢，我们再回来在这边对吧，这个home是人家原先就有的，是这个home。然后这个扣。就是我们在这里的死扣对不对，那么你现在已经把死扣里边的内容搬到组件里边，咱们与之同理的怎么样，也就需要将。他。也搬到组件里边，因为你看它就是对应的扣，对不对，这里边的内容全都是扣的。

这个括号对应这，这个括号对应这啊，不要把括号写错。然后到这头，咱们也给它放在样式里面。好，我现在保存一下。好之后呢，我们在这里面你随便写点，比如说2222保存。对吧，那么这边也就会跟着显示2222，为什么这就是我们刚才所说这个插槽的作用，那么我们现在调用了这个是自定义的组件，我们找到自定义组件所对应的这个文件之后。在这里有一个插槽，那么就会把它放在插槽的位置换插槽，所以说在这里写一个lo和写222就没什么区别了，对吧。然后呢，我们现在在外边，我们想要用这个循环做一个测试，怎么样，那么我们把它。换成刚才那个循环。

啊，这样呢，我们先粘贴下来，把这个屏蔽取消掉，然后呢，咱们再用它替换这个222，就是把这个循环再放过来，我们再来保存一下。对吧，现在呢，数字没有问题了啊，我们也把它放在一个组件里面了，其实刚才咱们操作就是把。这些东西放在组件里看着更加清晰一点啊。好的，到这呢，我们第一大部分就完成了，对吧，咱们看一下这个幻灯片，咱们最开始预计分两部分，第一大部分就是外面这个大孔。第二大部分呢，就是咱们里边这些小框，咱们现在呢，已经把最外边这个大框给它完成了，然后呢，我们现在要整的就是这个小框，小框呢，你想一下这个是一个组件，那它。里面还有很多个小框的，小框呢，就等于是在组件的里面又套了一个组件啊，说起来有点绕，怎样大家应该也能明白，就是在这个大的框是一个组件里面就套了很多个小的组件啊，就是大大的组件套小组件。

刘，嗯，我们暂时呢把它。拿出来。啊，因为它主要是用来做这个数据演示用。之后这里面我们还是要再套一个组件，咱们也给它起个名字。比如说我们是用来放卡片的是吧，里边的卡片。OK，那么这个时候呢，我们点击一下保存，它这里呢，会调用了一个列表的卡片的一个组件，咱们这边呢，还没有这个卡片，对不对，咱们呢，再建立一个面包卡片的组件啊，在哪建立找到。组件。Confident，然后新建组件，这里选择SS，然后建立重名目录，点击创建。

OK，然后呢，我们这边呢，就建立了一个关于card的一个组件，对吧。我们现在要写的这个看的这个组件，就是一块一块的里面这个小块。那么在这呢，我们这个卡片你如果这样写的话，咱们不就相当于是只用一个卡片，对不对，我们最后的商品肯定不止一个，那可能会有很多个，对吧，一个两个三个四个，我们。就需要有一个循环，打个比方啊，比如说咱们有有五个啊，那么我们应该怎么选。有一个for循环对不对，V-for。然后循环的格式就是什么印什么。后面呢，比如说我们写一个五，那么就是说有五个需要循环的，对吧。啊，前面可以是一或者是。其他的啊，我们一般的就用一体。

然后呢，我们在这儿啊，就是要循环的内容啊，比如说是。卡片。好，我们现在保存一下。这里呢，已经有了对吧，卡片卡片卡片卡片，但是呢，还不是我们想要的这个效果对吧。然后我们现在既然用了这个组件，那么我们可以把这个卡片放在这个组件。比如说我们这样写，然后我们再保存一下。好，那么现在呢，看着好像是没有变化对吧。然后我们把它这边告诉一下。那我们现在是把它循环了五次，调用了一个卡片，卡片里边我们已经放了内容，然后它为什么没有显示呢。

刚才已经保存了呀，然后没刷新啊，现在可以，可能因为刚才没有保存没有刷新啊，那么现在呢，我们已经。现在呢，我们已经实现了一个简单的卡片的一个循环，对吧，我们把它放在了这个card里面卡片，对吧，我们这里要写别的话你也可以。记得刷新，然后保存好，那么我们现在呢，需要把它换成我们一个卡片的一个。对吧。因为我们输出肯定是一框一框的。那么我们在这啊，我先把它给删除掉。之后呢，咱们先建一个。

这个块呢，就是相当于是我们。对吧，这个块。然后这个底下。这里能不能先起个名字，比如说叫做。Is the car。我们现在需要对它进行一个class的定义，然后呢，我们先不着急，因为这里边还会有别的东西，对吧。嗯，现在保存一下。首先再画个图啊，这个里边。对。这个是其中的一个块，那么这一个块里边它可能会有一个这块是一个，比如说是个图片，然后这块呢，是一个商品的标题，然后下面的可能还有一个销量啊啊，这块什么销量啊啊，或者说是别的什么什么什么东西啊，然可能会有个价格呀，大概是这样的一个。

一个样式对吧。啊，然后可能咱们预计可能还会有个收藏什么的，所以说呢，我们需要把它这几个小块也写一下。然后把它打开，这里边咱们再来一个。六。然后呢，我们可以起个名字，比如说叫。

然后你卖。可以吧，啊这个呢，就当做咱们是要给它用来装图片的一个一个东西。那既然有图片儿，我们再把它打开，这里面呢，会有一个图片。图片还可以。这个时候呢，咱们可以选择一张图标啊，比如说我就先默认使用它，使使用这个图标，然后现在保存。对吧，这个时候呢，就会有一个两个三个四个五个对吧，那这个五是哪来的呀？是我们这有一个五对吧，我要是在这里呢，改成一个四。保存，然后再刷新一个两个三个四个就变成了四个，对不对，现在这个图片已经引入了，当然说丑的不能再丑了，那非常丑对吧。

然后呢，登录的呢，就是一个填充的意思，比如说我们写一个。啊，这个就是保持横纵比缩放图片，只保证图片的短边完全显示出来，也就是说图片通常只在水平或者垂直方向是完整的，另一个方向将会发生结局。啊，我再保存一下。对吧，我看着呢，这就比刚才好像截掉了一段东西。

然后我们打开这里面呢，可能会是上面是一个标题，然后下面是一个类似于像是一个销量啊之类的一个东西，对吧，那我们还需要再来两个块。

这里可以去重新把上面的保存一下。List content。然后。带走。对吧，然后再下面呢，还有一个可能叫做描述啊，或者叫做价格呀，或者是叫做销量之类的。

比如说他这个是咱们的图片，这个是咱们的标题。我复制一个。然后在这边写成标题，然后下面咱们暂时先用它一个占占个位置啊。是一个，比如说店铺好，我们现在来保存看一下。对吧，这个时候呢，这些字是已经显示出来了，但是啊，我们是希望。肯定不是希望现在这个样子对吧，他是我们想的是这是图片，然后这是标题，这是描述是这样的一个一个效果对吧。

首先呢，咱们还是展现方式。等于。对吧，这个咱们就不说了啊。二一容器吗？好，然后呢，就是一些上下左右的边距呀。比如说咱们来个17叉。

然后还有一些间距。也来个实体啊，好，我们现在保存看一下。啊，样式是变了，但是依然是丑的，不要不要的。对吧。那这个呢，咱们其实之前也用过，也再跟大家再复习一下啊这个caring。和margin都是指的是编距，但是呢，一个是内边距，一个是外边距啊，我们来看一下这个幻灯片对吧。Harding呢是指的是内编剧me？是指的是内边距啊，是指的是外边距啊，都是指的是这个编剧。我们设置它之后，然后它左边就有一个间距，对不对啊，就是这样的一个属性的作用。然后再来个边框。

这个呢，咱们来一个武器叉试试看，不行的话咱们再调。嗯，好的，那我们接着再看一下。现在我们看着还不明显啊，这个呢，我们之前也用过，对吧，你看上面这个调这个框框的时候，里边搜索框的时候，这里是不是一个圆角对吧？在这个圆角就是用它啊，它呢就是实现一个和圆角相关的一个效果啊，我们在幻灯片里面也给大家进行了备注啊，像div元素添加圆角的边框。就是这个代码的意思。接下来呢，咱们再添加一个。沙斗啊，就是先要一个阴影值。

好，我们现在保存看一下它的效果。对吧，这里呢，就有了一个外对化的这个阴影值，然后这个东西，我们这四个数，它代表了什么呢？其实呢，它最多呢是可以有六个啊，可以有六个函数，有六个参数，我们可以看一下咱们的幻灯片对吧？呃，语法呢就是它它它它它它对吧？最后咱们还可以增加一个颜色。那么。前面这几个分别代表什么？水平阴影的位置，垂直阴影的位置，像在咱们这里呢，咱们写的就都是零，水平跟垂直咱们写的都是零，你要想改的话也可以改，但是我觉得人家默认的这个就就挺好看的了，对吧？

然后。第三个是可选模糊距离，第四个是阴影的尺寸，对吧，模糊距离，阴影的尺寸模糊距离，我们就是这模糊的距离，你要是改小一点呢，比如你改成个四。我改成一吧，要不然一五跟四你对比不出来，我改成一，你再保存看一下。对吧，能看的出来效果吗。二。这个就是也是一个CSS样式，让你显得美美观一点。三。然后可以再有一个参数，就传的是颜色，嗯，我们这里的这个颜色看着其实可以的，但是我们要是想想让它再颜淡一点，比如说。我来。这款。保存一下。

对吧，这样的话是不是更美观一点了。对不对，那么现在呢，实现的是一个这个边框的一个效果就是阴影啊。然后啊。等于。啊，这个呢，就是说把它当成一个盒，给它装盒。好的，那我们现在看起来呢。边框是有了，但是这边呢，这丑的是不要不要的，那么接下来需要调整一下。嗯，我们先把。首页这里也给它加上一个溢出隐藏对吧。溢出隐藏啊。

这个命令对吧，Overflow。对不对。大家保存啊。呃，他虽然说。这个边框咱们不在你出了对吧，但是这个字它还是溢出了。我仔细看一下，我先把它取消，你对比着看一下。你看这个冰块现在是在这儿。对不对，然后我们要。不加这段的话，他直接就出去了，我们要是加上了呢，他虽然说。没有溢出。对吧。我们加了之后，他是没有溢出了。但是这些字。他在外边。

我们一点一点来，咱们呢，先把这个图给它找一下啊，图片肯定没有说这么大，而且这么这么丑，对不对，那么这个图咱们是在pad里面找到图是这块。对吧，他写的是这个图，那么图所对应的是这个class。我们。复制一下。然后呢，你看好了，它的上面是list car，所以说呢，我们要写在它的下一集。在这里面我们能加什么，比如说我们可以显示一下它的高啊宽呀，对不对。咱们比如说给一个60P。高。也来个60皮卡。然后我们现在保存一下。呃。

Image。它这个变的变的呢，也是。非常丑对吧。我也给他加一个溢出隐藏。Over。爱的。然后我们再保存一下。对吧，那这个字。把溢出隐藏完之后，它不会再溢出了，我们看着稍微好看点的，我们呢，还可以给它加一个。咱们上面都加过的对吧，这个是圆角，我们这边可以给它加上。然后也来一个。这样咱们设置了一个圆形。对吧，这个角也变圆了。

这样呢，我们看上去呢，就稍微好看一点，然后我们好像滚动的效果不明显是吧，这样我们多整几个。在首页咱们之前写的是一个四。我们现在拿一个六。对吧，那现在呢，我们看上去稍微顺眼点了，然后我们还需要继续调整，包括它这个字啊啊位置啊之类的，对吧。然后我们再来看一下，那么现在我们所写的啊，是这里的。一个样式，它里边呢，还有一个标签样式对吧，那我们还得写一下它这个标签样式及位置。这个时候呢，我们就不需要写这个点了。对不对，为什么点是对应的class顺便普及一下，井是对应的是IG，那么如果说是标签，那是啥都不用写，你直接可以。

这样写出来啊。然后括号。好，那么我们就再给图片设置一个宽和高。百分百。也是。百分百，然后呢，点进去保存。对吧，那么这个时候呢，这个U就出来了，为什么？其实我们原先它是相当于是截了上面的一部分啊，截了一部分，那大部分呢，它是溢出被隐藏了，然后呢，现在呢，我们就让它不隐藏了，对吧。但是现在呢，还有个问题啊，我们这明明写的都是百分百60乘60，它为什么到这变成长方形了呢。

我再刷新一下，看一下，确实，哎，它为什么变成长方形的呢？那么我们如果说把这增加一点，看看会不会有用，比如我们改成160。把宽改成160。那他还是能够宽的。120。好，我们现在呢，虽然说能够已经实现让它显示的是一个正方形了，但是为什么呢？为什么我们设置的是宽是110，高是60。但是在实际站的时候，它显示的是一个正方形，显示的实际两个都是约等于是60呢。

那有没有可能跟图片有关系，那我们现在把这还是改成60P叉。然后呢，我们改一下图片，看看会不会能够改变这个情况啊，这是默认的图片对吧。比如说咱们换成一个网址。图片地址。然后保存一下。啊，那就是说跟这图片没关系，人家这个图片肯定是正方形的，但是在这呃，我们画上去之后，它还是会变成一个长方形给挤压了一下。

那我们就没有必要用这个网址，咱们接着用刚才那个演示的吧。呃，在这加上一个。来个零试一下。诶，这样就可以了啊。那么这个呢是什么呢？它呢，就是说在弹性布局下，能够控制这个压缩啊，就收缩的这样的一个量，默认值呢是一，然后我们可以看一下我给大家准备的这个幻灯片啊呃，默认值呢是一个一，规定项目将相对于其他灵活的项目进行收缩的量，默认值是一，然后呢，我们改成了零，就是让它不再进行一个呃收缩，就是让它以原生态的进行展示，这里呢。

也有写它的属性指定了元素的收缩规律，呃，元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩大小是依据它的值。啊，这里呢，还应该再写一下，它只在这个弹性容器中。才会进行展示，那也就是说为什么我们要在上面要在这里面有一个。第play等于对吧。要有一个它，因为只有在它里面才会生效。所以说以后如果说呃，你遇到这样的情况啊，明明下面写的是60乘60，但是呢，它给压缩了啊，就是因为它可能会因为有一个收缩点，默认值是一，嗯，然后我们这里改成一的时候，应该是跟我们刚才一样了，对吧，一个压缩的我们是改成零的，就让它不再进行这个变形，不再进行这个收缩。

好，那么我们这块也过了啊，接下来呢，我们要整合这下面的这个文字区域，对不对啊，咱们现在图片基本上就到这了，我们下面要整的是这个文字范。对吧，然后是和上面这个card image是同一个级的。他是同一个级的。所以说我们在这。点。然后打括号。这里面我们设置一下，包括它的。这这边啊，就是右边这块。咱们第一个呢，还是弹性容器DS。然后是它的这个高啊宽呀布局对吧。

然后上面也有写这个布局。就是让他。对吧，就让他。竖着排。我们手手打一架吧。之后呢，再给它设置一个。先看一下效果啊，现在还没有显示呢，再给它设置一个。啊，欢迎啊之类的。左边的编剧准确的说应该是。左边距啊，比如说再来一个T叉行吗？看一下。

5P好像小点吧，10P。差不多了，试一下。然后设置一个宽。点击下保存好，这样呢，我们这一块就是出来了，就是间距啊，靠左边的这个间距出来了。之后呢，我们想要对这边的字体进行一个修饰，那么我们就不能在这写了，对吧，因为你你上面这个标题跟这个店铺他可能。是两个样式对吧，我们希望它是两个样式，所以说呢，我们在这边也是已经给它分开了，那我们直接先设置这个相当于是标题的。对吧，相当于是一个标题的一个。Glass。那么这样的话就很好说了吧，无外乎就是颜色呀，大小啊，是否加粗啊，对不对。

嗯，颜色color。好像就是就是黑色吧。啊，这个其实保持默认就行。我都到这儿，就写一下黑色。对吧，它本身就是黑色，然后呢，我们再来一个。大小。写了多少？试试看。啊，稍微小了一点。然后。来个加粗。

对吧，加粗加粗之后它上面这显得有点大啊，我们再改改小一点。差不多吧。好像有点太小了，三。凑合着，不行的话，咱们一会儿再改，然后呢，我们。再来一个行间距之类的。行高行是。差不多吧，现在怎么看着稍微比刚才要顺眼一点了。然后这个店铺呢，他肯定也是要调的，至少不能比你不能说店铺名比标题名还还大，对吧。然后这里呢，我感觉这粗也不太好看，咱们要不加粗呢。

我家随便个水。这样吧，这样还凑合着，这样还凑着，咱们这个就先这样，然后下面咱们鼓捣标就是店铺的这一堆了。嗯，我们看一下店铺呢，是这样，但是呢，这里面咱们不能说光写一个店铺名吧，咱们至少得有一个。类目对吧，比如说我们下面有首单啊，啊天猫超市啊，京东苏宁，那我们现在这个位置得有一个叫做叫做类目啊，或者我们下面不叫选项卡，叫做选项啊之类的，对不对，那我们把它。里面反给拆一下。再建一个。UV。然后克拉名。Nice。

然后下面呢，咱们。是。这里呢，咱们可以叫做销量啊，或者说叫做浏览量啊。

我们开始写它的这个类啊，Title咱们刚才写完了，然后写它的，注意它的跟title呢，是在同一个级别里边。所以说呢，我们要。开头呢，肯定也是展现方式，弹性布局类。等于。然后随机方式。

字体大小front size，咱们刚才是13是吧。13P12，其实我觉得描述应该要比标题小一点，我们就改成12。对吧，现在呢，就看一下就稍微顺眼点标题，因为它已经在同一行了，然后我们再来优化一下啊。OK，然后呢，我们看一下啊，这一块咱们写完了这块对应的是它对吧，然后呢，接下来呢，我们要写这个在下一级的啊在下一级。然后我们在这个里边写对吧。因为是他的下一集。

还是啊，老规矩，先是来一个让它横向的弹性布局GI。Display。FL。一。我们现在看着好像没什么变化的，对吧。

之后我们在这边可以写咱们刚才的标签。之后咱们再把它拿下来，它的上一级是label对吧，就是我们这里的label。点他。

在这里我们可以设置一个。Pardon，那么上下左右啊，应该是上右下左这样的一个顺序。劈叉。五。然后保存看一下效果。对吧，它呢，就往右边要移动了一点。然后再来一个编剧。右边。啊，这样的话看起来不太明显，咱们继续。然后呢，我们也是来一个圆角，再来一个边框啊，圆角我们之前已经说过了这个圆角。这是阴影啊，这个是圆角对吧。

哦。这个呢，咱们来一个多少。来个15劈叉。然后再给他来一个边框。这个是边框的粗细。然后是边框的颜色。好，我们现在再保存一下对吧，那我们现在这个边框就出来了啊。就是我们想要给他留一个边框。之后呢，我们标签这边已经完事了，然后还有一个就是这个浏览量啊。

浏览量，我看一下浏览量对应的是它对不对。然后我们找一下与他同级的class。是。这一题对不对？是这种飞机，那我们应该是写在这下面。之后呢，我们也可以给它加个颜色呀，行高啊什么的。来点保存。啊，稍微移动了一点啊，这个好像变化不是很大。

那么我们调整一下它这个垂直的位置。

Discard。标签。应该是在这儿，然后我们也给他调节一下，让它垂直显示。就是添加一个框，就是那边去插入。隐藏一出。没写手，写手都点下。很。我再来看一下。对吧，那这样呢，他就往下要走了一点，看起来得稍微顺眼一些了。这个是什么意思呢？那我们可以看一下咱们幻灯片里面给大家准备的资料。

它呢，就是能够让你这个容器啊，周围留有一个空白项目，位于各行之间留有空白的容器内啊，那么我们就是用它来调整一下这个位置啊。然后我回头看一下啊，这个里边是黑色，外边红色，好像显得不太好看，然后我把这个标签的颜色也给它调整一下。我们找一下标签。对吧，标签的颜色。这。咱们在这加上一个color。然后。几块咱们默认的好像都是用的这个颜色啊，咱们可能也是为了偷懒，是用的它啊，我们现在保存一下。对吧，这个时候看着就比较顺眼了，这个位置将它显示的就是一个标签，比如说京东苏宁，或者说是什么什么什么的。好的，那么到这呢，我们基本上就已经算是完成了啊，这个面板看着已经比较顺眼了，后期呢，我们就要往里面添加一些内容之类的，同时呢，嗯，还有一个就是关于一个文字溢出啊，你也可以设置一个文字溢出隐藏，根据咱们之前学的内容，你肯定是能够独立掌握了，如果说前面内容你都搞搞明白的话，什么叫独字，什么叫这个，呃，文字艺术的你像啊，我们现在只有这些字，那我们再增加一段。

保存一下。看吧，能不能再增加一份。这里的高度它就会变化，然后我个人呢，其实就是想要这样的效果，因为我们做的是一个线报，你每一个。先报信息，他可能内容不一样，那有的可能就是一行，有的可能三行，对吧，我们要是把它写，那反而不好了。写死的话，你后边可能比如说你后边整一个点点点，那用户还得点进去才能看见，这样效果反而不好，但是如果说你喜欢说，就想让他一个固定排版说，就是第一行第二行，第一行第二行没有，第三行超出两行就变成点点点，这样的话你。

用一下我们这节课教你的这个溢出隐藏，对吧，用一下溢出隐藏。哪去了，一出用一下它就可以实现，但是呢，跟我们这个项目就有些相悖了啊，我们这个项目是希望它能够以多行的形式进行一个展现啊好，那么这节课呢，咱们核心内容呢，已经跟大家讲完了啊，感谢大家的关注，我是霍长亮，最后呢，还是留一下我们的这个联系的方式啊，记得我放在哪个里。这对吧，呃，甭管您对于淘课或者是APP感不感兴趣啊，您要是觉得我这人还可教，那您加我QQ和微信，期待以后有机会与您进行合作和交流啊，感谢您的关注，拜拜。