09. 尚硅谷_Mpvue_index静态页面搭建

好，来，我们继续，那上节课呢，我们去把这个table的页面来搭建完毕，那这节课呢，我们就可以专注的去写我们每一个tip对应页面里面的内容，咱们呢，先来写第一个页面，就是index页面，那这个时候呢，我们来到我们的代码这一块，哎，把之前的这个先给它拆掉。那拆掉以后我们看一下，我写好了这个啊，这上面这有啥，那最开始上面这儿这是个轮波图，那这个对于我们来说一点不难，然后呢，下边这是个navy，相当于哎是个导航，那下边呢，这就是一个图书的列表，好看完这个以后呢，我们先去把这个头部的swaer先给它完成一下swaper，然后呢，Item在这里面呢，是图片啊，那这个图片这一块的话呢，我们可以先用一个静态的图啊去给它代替一下，呃，我们first不用啊一呃，先用静态的图啊，待会儿我们去编利一套二三啊，我们就换三张写二。

3OK，来，那这个时候呢，我们看一下这个基本的图片是不是有了，那接下来呢，我们去给它调一下样式啊，调样式的时候呢，先给外边的容器呢，我们先来一个ID index container，好，那这个时候呢，到这它下边了swaer啊，首先宽应该是100%，嗯，高的话呢，在这应该是400RPX在这儿呢，我要强调一个事情，我们所谓的400RPS大家看啊，其实在我们。编辑工具里边展现出来的是不是应该是200个PX呀，哎，咱之前呢，讲过这个换算比例在F6下面，Erpx等于一个物理像素，是不是等于0.5PX呀，啊，相当于是物理像素单位啊，这个是我们需要掌握的，好知道了这个以后呢，我们接着往下，那它下边的有面积，首先它应该是100%，那这个时候呢，在这它的高是不是也可以是100%。

来看一眼，哎，基本的效果呢，已经出来了，那剩下的就是导航点了，对吧，导航点的内容其实咱们写过了，在这儿呢，就没有必要再写了，在first里边我们去把什么，把这个这一堆，嗯，去给它拿过来。OK，来把这个放到这儿，只不过这个时候这儿呢是不需要条件的，所以呢给它撤掉，那对应的这个，呃，强制解析呢，咱也不需要了，那这个时候再看导航点是不是有了，好轮播图实现了以后啊实现了以后，那接下来我们再往下写，呃下面呢，无非不是一个导呃图书的列表，列表里面有一个头部有一个图书列表的内容，那这个时候呢，我们先去写一下它的结构，首先我去整一个div啊，这个叫books，呃，List走呃在它的里面呢，有一个啊什么呃，List navy就是导航，那这呢有什么两个span，一个叫啊全部商品，然后呢，我们再来一个SPA，那这个SPA这应该那是一个。

符号啊，是一个箭头，OK，那紧接着再往下我们div点，那这呢，我们就叫它一个呃，List OK，那这个时候在这里边我们看看都有啥。哎，上面这个是不是出来了，或者说上面这个我们可以先给它加一个样式啊book the list，它跟swaper同级，那那把sper收起来以后，把它拿过来，然后呢，在它的下面有一个books and navy，这个navy的话呢，首先呃我们可以给它设计行高板line，比如说来个呃高一点吧，80RPX，然后呢，要做的是你们加一个PA上下10RPX右侧这个更多的话应该是在右侧啊，所以呢，我这给它来一个类叫帽，然后呢，在这点一个冒，嗯，Float啊right让它到右侧是不是OK啊啊，那这个时候我们再看效果，呃，它这个效果没出来，没出来我们看一下啊BOO list啊，那这个叫什么叫list navy啊，叫list nay，嗯，应该是它好，那这个时候我们再来看。

哎，这个是不是就过来了，然后上下的边距太大了，我们可以这个航空先不要它了，看一下效果加个拍定就好了，好，那这个效果是不是出来了，出来了以后来我们专注的去写下边的内容，那这个下边就是list，那list这一块我们看一眼，呃，其实它的结构都是一样的，所以呢，我们写一个就OK啊，在这一个里边其实也没有多少东西，来，我先把这个插一下。

呃，一个图片两行文本对吧，那这个时候呢，在它们下边来，我们来一个，首先在这个叫book item，首先一个图片，然后一个P标签，那这个P标签呢，下面这一个放的是书名啊，有个书名号，然后呢是作者，呃，我们来一个吧。来在这一块呢，书名啊，首先呢，这个都应该有书名号，然后呢，在这儿你给我们来一个平凡的事件，OK，我们再来一个P标线，那这个呢，啊，比如说路遥好，那这个图片的话呢，我们也来选择一个static下边呢，Image下边，然后呢，First view下面的女神的JPT，哎，为了要调试我们的样式，那这呢，应该是至少有四个，就是啊水平两数量调完以后我们把它撤掉，然后再去别例，那这个时候呢，我们去写一下这个list，应该是跟这个na，嗯，是平级的，走它下边呃的list啊，Book item，当这是我们的层级，那现在我们要知道的是一个book book item占多宽呢。

啊，应该是50%，那这个时候我们去做布局的时候，大家要时刻想着啊，在小程序里边，他特别推荐我们使用什么，使用flex布局，所以呢，在这我们上来去play flex对吧？那先把下面那个撤掉，我们来看一下，哎，下面这个宽度我们应该是给人家设一下的啊这呢，这个flagx应该是Y多少50%，OK，看以哎，上来是上来了，但是本应该是四个，那后边两个是不是看不到呀？嗯，为什么呢？因为f flagx布局默认的话，它是不允许换行的，那这个时候呢，我们得让它去换行，那在这呢，我们来一个flex，嗯，Rap，然后呢，我们来一个rap看一下，OK，那这个时候打家开来是不？下面也有内容了，有了内容以后我们就可以专。

步的去写一下里边的东西，首先呢，大家看一下每一个HM里边图片和文本什么水平居中，然后数值的话，呃，一行图片，一行版本，一行版本，那我们先来看图片的大小是多大。

哎，100乘以100PX，那也就我们设的时候，咱是不是应该是200乘以220PX呀，OK，那这个没有问题，以后啊大家再想一下，呃，小程序里面特别推荐使用flex布局，对吧？那再想一个问题，Flex能不能嵌套？哎，可以是吧，那其实嵌套的话我们就知道了，在这用flax也很简单，来我们试着去做一下，那首先这个下边的嗯图片我们知道，嗯，刚才聊了Y是不是应该是200RPX，然后高的话呢，也是200RTX，那这个时候我们可以让它的啊负元素display fle一下没问题吧，因为它竖着排列的，所以这把呢，我们应该是去规定一下to，它主轴的方向为color，然后呢呢，嗯，Center来第居中一下，来看一下效果。

哎，是不是就好了，那剩下的无非过去调一下这个字体的大小以及横间距，那这个时候为了美观一点，我们先给这个图片，这我们来一个market上下的market，比如说来个5R PS左右为零，然后呢，它下面的P标签啊，Phone size小一点，24R PS行高的话我们来一个50RPS，看一眼走。嗯，是不是出来了，然后呢，大家看一下我这写好的这个项目里边，诶，每一个H是不是都有一个下边框呀，然后呢，中间这儿还有一个边框，但是你要注意这个边框。这条线最起码跟他们是一样粗的，对吧，那也就是意味着要不然你是全部左边内容给它设置右边框，要不然是全部右边的HR给他设置左边框。

哎，知道这个以后，来我们去写一下，那首先这个item，这我们能确定的是这个，呃，Border bottle对吧，Erpx so，然后呢，井号E这是都有的，那紧接着我们是不是要要不找它全部左边的元素，要么找它右边的元素啊，那这个时候呢，我会选择用这个暗的伏。这啥意思呢？叫负极引用，也就是在它下边我们是不是能找到相关的负极呀，OK，这呢有一个选择题叫last，哎，Child，那child呢，是可以有选择性的去选中它，哎对应的元素，那这呢，因为我们选左边的那是奇数，我这来个2N加一啊，二加一，这来个border，然后呢，右边我们是RIGHT12P X solid减号一来我们看一下效果，这个时候大家看。

这个是不是有下边框啊，也有边框，而下边的这儿都有对吧？那这个就没有，是因为我们把它排除了，但现在的布局很明显不对，它掉下来了，为什么？哎，其实很简单，我们刚才给这个HM是不设了50%啊，然后现在你一设一个边框，虽然说就多了一个物理像素，但是距离不够，它该掉还得掉，所以基于这种情况呢，我们可以设一个什么啊，Box s fo box，让它变成什么怪异和模型，就是说在计算宽高的时候，把我们的边框哎，以及判定计算进去，那那这个时候我们来看一下。

诶，大家看是不是就好了，好，那这个好了以后啊，这个图片的距离好像还是有点小啊，我们这再大于这来个十吧，啊10RPXOK，那这个时候呢，这个基本的样式出来以后呢，我们就可以干嘛把这个拆掉了，那其实这里面呢，我们只留一个是不是就够了，来把其他删掉好了，那静静态结构搭建完了以后，那下一节课我们来把数据动态的展现，那这节课呢，我们就讲到这里。