00:00
大家好,我是学习园地的特约讲师高若峰,上节课我们做了选项卡看一下,可以切换新出,还有精选以及畅销这几部分,那内容呢,我们是通过循环做了一个假的数据,那这节课呢,我们就将内容数据这个组件咱们开发完成,先看一下原型图,在原型图里边呢,我们内容区域看一下,不光是在我们首页上边需要这样的内容区域,在我们的分类页面,当然分类页面我们使用的格式跟这个是不同的。那再看我们的内容页面,也就详情页,详情页里边我们概述热评,还有相关图书用的界面跟它是一样的,所以呢,肯定是单独提出来一个组件,另外这个组件呢,是专门为我们本商城内容展示使用的,所以呢又属于内容组件,这个组件呢,我们就应该声明在我们内容组件的目录下面。不应该单独声明在我们后页面的这个子组下边。也就是在我们这个下面上面。另外呢,我们再划分一下组件。看一下我们首页的这样的一个需求,每一本商品的详情,有商品的图片,有商品的名称,以及这个商品的库存量和商品的收藏,当然了你可以放商品的这个价格,对吧,这地方你可以放商品的价格,然后。
01:15
商品的收藏量这两部分价格。那划分的时候,本身每一个商品这是一个组件,那多个商品组合在这个区域里边,我们又是一个商品的一个列表,对吧?这商品列表本身又是一个组件,就是一个组件,那商品列表是一个组件整体我们放一个商品的时候,我们就可以把它。呃,在首页里边或者二级页面里边,我们用商品数据就可以,那数据获取呢,我们是从接口里边读取过来的,那这节课我们只是渲染页面,下课呢,我们将呃访问接口,将数据从动态从服务器请求过来。我们先在这里边见一下我们需要的组件。按照需求我们去看啊,在内容组件里边,内容组件里边呢,我们需要的是商品,那我们这里边建一个目录。
02:07
我们叫做商品gods,在商品下边呢,我们需要两个组件,一个呢是商品列表,一个是商品项。新建一个。呃,我们可以把它保存到子目录里面,那也可以在当前这个目录下都是商品处理的嘛,那我们直接在这个下面添加就可以了,Gods商品列表,商品列表一个组件,那我们再需要建一个。指商品项。那我们就叫做good,呃过商品列表的选项,It em就这两个组件就可以了,然后这两个组件呢,我们在商品列表里边,我们应用的商品列表里边应用的是商品项每个选项,所以在这里边我们需要引入。什么这个商品这边选项在当前文件这个,然后我们就注册这个组件,注册组件。
03:02
切换一下输入法。注册组件,然后在这里边我们将这个拿来。那在商品列表里边,我们注册完这个组件,那我们需要引入多个组件对吧?所以呢,在这里边我们来一个div,因为每一个组件外层都有一个div,我们可以给它的样式对不对,比如叫good,当然了,我们后期写这个样子就可以了,我们先在这里边加载每一个商品。列表选项IM可以有多个,所以呢我们在这里边加载多个,加好给样式,当然我们后期都是从数据里头循环出来的,现在呢只是先把外观样式我们先做出来。然后回到商品列表选项,我们按照我们的这个需求,我们开始去做,需求呢,有一个最上边的一个图片对吧,然后呢,图片里边有名称,然后有呃,价格以及收藏的数量,有这么几个。在这里面我们首先肯定需要一个最外层的一个元素,对吧,那最外层元素呢,既然商品项我们肯定得给样式的,样式我们也是后期写,但是我们先把这个标记上来,IM。
04:07
然后这里边儿呢,我们上边是一个商品的图片,上面商品图片我们先把所需要的HM列出来,然后呢,需要的是图片,下边的是商品信息,我们可以加一个类。用叫做roots ino加一个商品信息,商品信息里边有个标题,我们就可以用P标签来加,对不对,这是标题,然后呢,我们再加一个什么,加一个价格,加一个价格我们用磁SPA标签,当然我们后期肯定也得给他样式,为了能方便的我们用选择器加加一个价格,假如说这里边我们加上s ma small小的标签,然后我们加上一个。呃,美元符号这块加上比如说100元,当然我们可以像后边加上这个精度小数点保持两倍的那个可以处理啊,啊,我们再加上。S写错了啊这个。
05:01
STN,我们再加上收藏。收藏我们这里边儿,你比如说收藏有个33次收藏plus,加上收藏我们几个类名Co就可以了,那图片呢,我们现在可以做一个先做一个临时的假的这样的一个图片啊,临时的假的一个图片,所以呢,我们这里面加上I'm,嗯,使用别名的方式。Ass下边的下边加上有个比如说幺幺.pg我先看一下。这个图片要有点偏辑啊,我们放了一个这样的一个图片就可以了,再返回到我们的列表下,这我们可以不需要了,然后我们为了能看到这个效果,真的在这块看不到效果对不对,所以呢,我们需要在我们的首页里边。这块给它分成两个组件对吧,那在我们首页里面回到我们的首页。太多了,这个。嗯。里边。这些我们都给录入到这个,我们现在暂时一定要关掉。
06:03
这个是我们首页里边,那首页里面这个数据,我们先不用管它,我们需要在这个上面这个位置,我们加上我们需要的这个商品列表。也就是我们的这个选项对吧,那我们想用到商品列表,那我们就需要干嘛,我们需要在这块引入这个文件。引入商品列表do DS商品列表,当然我们用别名,就不用这些目录结构了。然后我们注册这个组件。注册组件,God,嗯,Gos,商品列表注册完成之后,我们就可以在我们页面里边使用下边的数据有点多,没关系,你先放在这块,因为我们还需要做那个数据的活动,所以呢,先放在这块。然后加上商品,呃列表。裤子商品那边。看一下我们注册的是不是这个。S对,商品列表。
07:01
商品列表这块我们只需要注册一次就行了,然后过来你看现在呢,就里边的显示的图片标题和价价格收藏都放在一起了,对吧,但是我们现在就可以给什么,我们现在就可以给样式了,来处理这样的一个情况。到这个商品列表项里边,我们先把每一个列表选项需要处理的样式我们给做完,你比如说上面的标题有列表选项是一个类,那我们需要在这加上一个good列表选项,对吧?列表选项里边需要有什么,需要有处理它的图片,Img。我们把这个图片标签也放在这。把它的选择器我们都呃都处理好,然后里边还需要有一个商品信息,Gods商品O信息这个类,商品信息这个类,那商品信息里边呢,我们还放了有什么P标签对吧?P标签以及我们这里边除了P标签,我们还有一个需要价钱P。
08:01
价钱?除了价钱还有什么?还有我们需要的收藏Co。收藏,当然了,我们现在这些大括号的这个结构现在是不好用的,我们需要改成S的一个模式。SS改成S,这样的话我们所有的结构就讲完了,现在我们就开始一个一个写样式。比如说我们先看一下。我们先看一下这个商品,呃,选项这个这个我们需要写什么呢?它每一个宽度,因为一个放两个一个宽度,所以我们宽度先设上,比如说50%。50%呢,有可能说中间的空隙什么就没有了,所以呢,我们可以稍稍将空间有空隙,比如说45或者是46都可以啊。这样的话,我们在一行上放两列,中间呢,就有8%的这样的一个区间,有8%的一个区间。然后呢,让每一个组件你看上下都是挨着的对不对,让它下边的组件离它距离远一点,那我们就是哈,这Bo PM底部给一个30或者40个像素吧,请临时给一下。
09:09
嗯,就大概差不多了,就是每一个选项也这么多,然后呢,我们把这个图片变小,这图片太大了,对不对,那我们用这个图片。嗯,宽度我们设置上,比如说一百百分之,因为这个宽度是相对于这个宽度的,因为图片是在这个里面,宽度100%,你看这样的话,是不是相对于46%,他放你一半的时候,他放在这块来对吧。然后。嗯,宽度照出来,然后每一本书,我们让它每一个图片,我们让它加一个圆角好看一点,URUR加这个,比如说圆角的角度给个五个像素,当然针对这个图片,我们现在还看不出来它有这样的一个宽度,一个高度,另外呢,这个样式呢,我们需要配合外层的样式,我们摆放这个呢,你可以用这个位置,因为我们后期还是一样有混动的,所以我们最好用相对位置和绝对位置,那如果这里边用相对位置,它的上一层也就这个列表里边。
10:06
我们这块不也有这个这个A吗,对吧。我们一定要在这个列表里边,我们把它改成。呃,还是用弹性和布局吧,弹性和布局那我们这里边给它加上。在这块加上gods,这属于一个上层的元素,因为列表项式的上面元素我们这个。列表是这块里边列表项呢,我们只针对某一个商品是列表项,所以呢得在上层,比如说我们用弹和布局,那我们得用display,得用这个对吧。然后我们用的是,嗯,自动换行。交换p wap如果没有空间的话,让他去换号,你看46%肯定有空间,对不对,没有空间的换号,所以呢就并行起来了,在这块就可以这样。然后我们让它是四周环绕,那我们使用这个啊,内容处理,我们让它空间是环绕的,既然是环绕的,它就会向两边去,对吧,均匀,当你加上背景就可以看到了,是这样的一个情况,然后我们让它每一个它都有一个空间差,给个趴,给个两个像素吧,四周都给一个空间,这样尽量让他想一下,当然你这块别体太大,因为我们只有46%的话,你要是给,比如说给上100。
11:24
就变成这样对不对,所以呢,我们这块可以给几个像素就可以,比如说给五个像素。让它缩放一下,这是外层,现在我们摆的差不多了,那里层。我们在在内部这一层的时候,我们一样需要处理。嗯,底部按钮相对,那我就不用了,因为用弹性盒这个,嗯布局了。和布局。加上一个吧,万一后期我们做滚动的时候会出问题,加这个,嗯,没什么变化,但是呢,已经把这个每一个变成一个相对的一个布局那种感觉。宽度高度,然后咱们下一个就是什么这个商品的详细的信息,比如说下边的标题的尺寸对吧,那我们可以呃,设置上字体的尺寸,这个太大了,标题对不对,我们让它变成12像素。
12:13
那要将它变成小点,也就下边的所有内容都让它是以12像素对吧,那外层咱们是相对的,里边的每一本每一个内容呢,咱们都可以让它是绝对的去摆放这个位置。绝对的。摆放这个位置,然后呢,让它离底部BOT。OM。Bo to,那它是比如说五个像素吧内容。这样我们用相对的布局的,然后用的是左。零。绝对不低,然后又我们也是一样。这样左右为零,它就会怎么着,内容居中,你看跟那个内容就相当于有一个位置,我们是靠底部离五个像素的这样的一个情况。然后呢,如果我们超出这个盒子的范围,我们再加一个。
13:03
如果超出了,我们就用那什么隐藏一下。当然你也可以设置这个文本居中啊。这个啊,没有那么必要了,等等居中,然后我们看一下这里边P标签内容,因为标题我们这只是临时做的,有可能标题很长,所以呢,标题如果很长的话,我们让它超出部分怎么着,隐藏超出公隐藏,然后要文本。这个你那部分我们让它出现什么连个点的那样的一个缩放,对不对,然后用空白的地方。呃,我们不交换,当然这都是固定的写法啊,然后底部有一个距离,比如说三个像素吧。每个下边一个离开一个距离,然后价格呢,价格我们可以设置一个颜色,嗯,一般的价格我们可设置,嗯,设置红色的,可以设置红色的价格部分。你看就变成红色部分了,对吧,或者是其他颜色你都可以去设置,然后。
14:00
让它的右边的距离。嗯,有一部分记录,比如说给个20个像素吧。这样的话,每一个它就区分开了,对不对,有个20像素。然后收藏这块呢,那我们只是来一个相对的位置就可以了。嗯。当这位置都可以一点点的去自己去设置调整。然后收藏呢,我们也需要用一张图片,这块只是一个数字,对不对,那如果收藏这块我们用一张图片的话,我们就需要把这个图片怎么样下载过来,然后在这边使用就可以了。呃,收藏我们在这收藏这加一个吧,加个图片,你可以用图标的方式啊,可以用图标的方式,当然咱们也可以用其他的一个方式。比如说在这块我们加上嗯,让这个收藏里边使用伪元素before,那它前面for for,那么前面我们加上一个图片。
15:05
那将来的前面加内容呢,我们用的是空的,对吧,在前面不加内容,我们只是需要加一个图片,然后图片在哪呢?我们就得需要用brand加上URL里边我们找到这个收藏图片,当然了,我们可以通过这个图标里边下载一个收藏的一个图片。在这里边。我们去下载一个Co,呃,Co收藏。喜欢哪个收藏的一个按钮,我们就可以直接下载哪个。当然也可以用图标的方式。用这个颜色吧。下载偏见。在文件夹中显示。我们改个名字。就叫收藏点天气拿过来。到我们页面这里边粘到这个里面。OK啊,当然这里边原来有了一个SVG啊,那咱们现在是偏的偏的偏近的吧。
16:04
这边。Ets找到这个位置。图片下边收藏et.PNG,这样的话我们就可以把这个收藏的图片放到我们的页面上,我们还是打开这个。那个你保存一下。这块有没有错误?As卖收藏背景。嗯,没问题啊,然后我们设置一个让它在零。和呃零这个位置,然后。嗯。14相似,再来个14相似大小设置一下,还没有,那我们在这块在给他一个上面是相对位置,对吧,我们设置一下,让里边我们设置一个绝对位置,不然它这个不显示。绝对位置。这上这个,然后我们让它左。
17:00
嗯,14个宽在前面显示,让他负15个像素。保存一下,你还没出来,那我们再来顶固,我们来一个先给个关注。是14个像素高度,再给14个像素。可出来了对吧,点上宽度和高度,然后左。这又往下了一点,对不对,那我们让它顶部,我们再来负两个小组。上去了对吧,两像素有点太高了,一个像素吧。嗯,就可以了,这块设置背景的位置,对吧,从这开始,然后再回去,这样呢,我们就显示了这个收藏的一个按钮。背置背景的位置,然后呢,我们再加上宽度高度,通过相对定位把它的加到我们这个前面去,加到这个圆柱上面去就可以了,现在有价格收藏,单个图片的这个样式,我们现在就基本上算是做完了。那下一步就需要什么,就需要我们从数据库里边绑定数据,把数据真实的数据放在这块,然后从数据库里边获取就可以了,我再看一下在这个里边我们有没有需要写的。
18:07
嗯,现在没有,没有需要写的在手里边,你现在也不需要,当然这个太多了去。这样的话,我们滚动的时候,你看滚动的时候,我们这个在这个的上面看到了吗。上面,所以呢,我们这块还得需要加一个z in代。这一袋子的。应该在我的这个里面。加上。Z,原来那个是九的话,这块给个五个像素,跟他的比原来的那个低些,怎么还这么高。这的。小心一下。在它的上面,那我们它是不是全部在上面看一下。全部在上面,那我们在这里边再改一下,应该是绝对定位的。
19:02
这个选项我们加一个这,嗯,给个四。给个六个。个六,数六就是六。还没过去。来,我们将这个里边的这一袋,这里边这一袋给调包。这应该比如这块加上十。这一段的十来可以了,把它调高对吧,不然的话调四五,它默认没写的话,它有可能是一,咱们应该是下的组件调高了,你看它超过了下边的组件对吧,所以咱把这几个还得给调回来。嗯,不加就可以了。这个列表里边咱们也不加。啊,现在就在底层滚动对吧,通过这个代词我们就可以改变这样的层级的关系就OK了。好,谢谢大家,这节课我们只是把这个写了一下这个组件的样式,那下节课呢,我们来保存数据。
我来说两句