07. 尚硅谷_mpVue_List静态页面搭建.avi原创

好，来咱们继续，那么接着上一节课来讲，上一节课呢，我们已经实现了什么？哎，我们这个页面的跳转，那么这一节课开始呢，我们专门去写这个list，哎，这个页面好，那第一步呢，我们先去把窗口的颜色去设置一下，那这个时候呢，哎，我们还是回到之前的去看一下，大家可以看到啊，我们从主页面跳转到list页面，它头部导航也说窗口颜色是不是这个颜色啊，然后呢，你再看一下我们其他的页面，这个头部颜色是不是都是这个颜颜色啊，那这个时候我们就要考虑一个问题，这个颜色还需要我们分别去设置吗？哎，答案是不用的啊，那这个时候既然说这几个页面用的是同一个颜色，那我们就可以考虑把这个窗口颜色的设置放到哪儿呢？放到我们这个APP点，也就是说全局的配置里边，哎，全局的配置里边OK，那这个时候呢，我们把这些东西，哎，这个颜色呢，我们可以拷一份过来，把它放到这，那这个颜色呢，呃，去哪儿取呢？我们可以去我们原来的这个src下边。

我们找哪个呢？找到我们的点杰森，那这呢有一个颜色对吧，OK，那这个时候呢，我们可以把这个拿过来，来让它编译一下，我们看一下是不是OK，那这个时候这个颜色是不是已经换过来了，好，没有问题，那接下来我们还要做的一件事情是干嘛呢？去设置它这个。文本，那这个文本就不能放在全局了，因为啥，因为它不同的页面上边这一个是吧，不一样呀，哎不一样，所以呢，我们这一把呢，需要放到list下边，是不是也得给他整一个什么叫，哎，另点杰森的配置文件，然后呢，在这个里边我们去写它。对吧？哎，那这儿呢，我直接粘过来是不需要它的，哎，这儿我们叫硅谷周刊，那其实我们当时呃，第一个页面在这儿呢，我们可以把这个设置成什么？嗯，硅谷我们叫它主页对吧？好，那现在我再保存一下，大家看，呃，它又还原到第一个页面了，对吧？其实之前我们讲过这个问题啊，为了便于我们观察的话，我们是不是应该把list页面放到最上边，让它直接去加载啊，所以呢，在ABB点接上这我会这样去做，把这个抽出来是不放到这个后边啊，哎，那这呢，你得用什么用英文的逗号重新编译走你，哎，现在我们是不是能看到list的组件了。

OK，那窗口的颜色设置完了以后，我们开始写里边的内容，那首先在这个里边，这是不是个轮播图啊，那这个呢，比较简单啊，比较简单，来来到例子这，我们先把其他的关掉。

龙播图的话，那这个时候呢，我们就得使用什么，哎，使用小原生小程序是吧，为我们提供的这个sweper，它里边是不是写em，那在这儿呢，应该是image image，好在这我们找一下static下面image，诶在这应该是ma image下边有一个我记得叫detail下边的啊。Car，先别大。什么呀，我们来看一下吧。零一.gpg对吧，然后呢，我们给它复制几份走走走，OK，那现在呢，我只需要把这个换一下二三，然后4CTRL已保存。哎，这个龙波图是不是已经好了，剩下的就是我们去设置一下它的什么，哎，样式样式OK，那首先呢，我可以在外边写一个list来container这个类对吧？那接下来在这儿写的话呢，就是这个容器下边的per，那这呢宽是多少100%，然后呢，高呢，我们当初应该给的是420PX对吧。

那再往下我们还要写一个什么？它下边的下边的image，那这个呢，宽100%，然后呢高呢也是100%，OK，那这个时候我们再来看效果。哎，是不是就成满屏了，那剩下那些小圆点呀，包括滑动的时候高亮显示圆点那个颜色呢？啊，我再给大家说一下在哪找啊在哪找，首先在组界，这你应该找到一个组界叫什么叫spaper对吧。找到外per以后，那这些呢，就是我们要配置的东西，因为之前呢我们已经配置过了，所以呢，在这儿呢，我就不去再写了啊，我呢直接把我们之前写的这个拿过来，OK走你。

哎，那这呢，应该是少了一个双引号CTRLS1编一保存编译，哎，这个是不是就出来了呀？OK，那这样的话，Swaper这个我们很轻松就把它搞定了，那接下来就是我们下边这一块内容，下边的话，它每一个板块的结构是不一样的，只不过是里边这些内容，哎，它是动态的，内容是动态的，那之前我们在原生的小程序里边，咱是不是使用他为我们提供的一个东西叫什么叫template，是不是模板呀，哎，模板。也就是说我们单独定一个模板，最终呢，是嵌套在我们当前list这个页面对吧。那这个时候大家想想，呃，在这儿你说我们要不要用他这个模板呢。

嗯，那我们之前用模板是为了抽取单独的一块，然后给他复用对吧，那其实在例在view里边完全不需要这个模板。因为我们组建这一块，我们是不是完全可以抽出来一个组件，然后让他组件嵌套复用呀，哎，对，那这样的话呢，我们就。要怎么去做呢？首先我是不是还得再去整一个页面？哎，整一个单独的组件抽出来，这个呢，我们就叫它list_template OK，然后呢，在里边也是，诶在这呢去创建一个叫list。下划线，哎，Template，呃，不应该是12件，我们是不是应该去整一个叫。

这个的加法OK，进来，那这个东西进来了以后啊，进来了以后，我们这随便写点啊，这个呢，就叫它list。模板，那现在这个模板这哎有同学说了，老师你还少一个叫m.GS的文件是吧，好，我先创建完啊先创建完，那这个呢，我呢先不去写任何的内容，先不去写任何的内容，我们先往下来看，好那这个组件，假如说就是下边那个模板组件，它要用到list里边，对吧？所以呢，我们在这第一步应该去干嘛，Import，我们的list at tmp。呃，这应该是上一级下边的，他下边的list点对吧，那这是我们以前的常规操作，在这呢，我是不是还要做一件事情，去注册这个组组件啊，来把它放进来，放进来以后呢，再往下的话，在这。

我们给他整个div吧，把这个拿进来，先把这个组件拿过来，这没问题，好，因为是新创建一个页面，我这是不是应该重新启动一下。OK，这边启动成功了以后，我们来看，哎，在这儿是不是已经有这个list这个模板的内容了。哎，已经有了，那这个时候大家想一下啊，我刚刚这个命GS这是不是什么都没写呀，那可能有同学怀疑这个东西是不是压根不用写呀，那我们再测一个，我把这个list这个组件的我给它注掉。来到这一块，你会发现这出现了脚本错误，为正确调用配件，还记得这个方法吗？这个方法是不是用来去注册页面呀？啊，那其实我们这做的所有操作是不是注册页面啊，哎，注册页面OK，也就是说，呃，刚刚list也是我们一个页面里边，哎，它是需要mini GS的，而在我们这个抽出来的组件这儿呢，哎，Mini GS这其实不需要写任何的内容，那这个时候呢，我们就可以在这边去看到，哎，我们这个模板是不是能用啊，能用哎，当然比较奇怪的是啥呢？大家可以看一下，我这儿不写内容，我把它删掉，删掉，诶他这就报错了，也就是说这个文件你还得要用，因为他上来要去找这个文件啊，要找这个文件，那在这儿呢，呃，我们先给他留着啊，先给他留着，那也就是这儿先不写任何的内容。

好，那整完这以后呢，我们开始写里边的内容，哎，我们开始写里边内容，那这个时候呢，这儿的东西呢，我们就不要它了，就不要了，好，那在这我们都要有什么东西，我们得看原来这个首先这一块这一块三四。

五块对吧，这是我们之前分析过的，就是这一块，这一个这一个文字，还有下边哪个呢，是这一行对吧。好，我们来写写，那首先这整个div啊，这有个image对吧，然后呢，我们再来个span span，那span里写的内容是一个日期，哎，日期我先随便写一个2018去表示一下，在这儿呢，我们去找一个静态的图片去代替一下。呃，维塔下边的我记得是零啊，随便找一个OK，那呃，再往下呢，它应该是一个什么P标签，你比方我这写个上硅谷，呃，接下来再往下还是是个什么呢？哎，是它应该是一个图片，图片对应的是哪个呢？是这个大图对吧？那这个大图呢，其他的我就先不管，先写一个静态的，那我就直接去我们之前这个测试的图片把它找到，再往下是什么啊，是很多的文字，呃，那我们就拿这个多给大。

复制几份OK，文字下边div，首先这有个image，那往下呢有个span对吧，你比如这是66，哎，那在这呢，我再复制一份。这改一下，这儿呢是88，好，那么在这儿我们要写的内容是一个来收藏的图片，那这个呢，它是在images是下边的这个I扣里边，IQ里边，OK，呃，我们到I扣下边找哪个呢？应该是有一个是这个，诶不是这个，这个是个大的。一个是他，一个是他。对吧，一个是小眼睛，一个是星星，只不过是呃，他用的是高亮的对吧？哎，这个我们用哪个呢，都可以啊都可以，因为现在我们在测试。

哎，那这个时候呢，把这个呢复制一份好，那在这呢，我们应该换成是什么，是这个view，哎，这张图好CTRLB一下。OK，那这些内容呢，是把它已经进来了呀，那然后我们去设置样式啊，样式这一块的话，来我先把这个收起来，首先呢，可以在外边去定义一个，哎，这个叫tmp模板的容器，哎这个呢是头像对吧，然后呢，还有个日期，哎，这是我们的老规矩，在这儿呢是一个公司。好，这个呢是大图对吧，我们叫它，哎详情的图片，那还有一个这是内容class，我们叫它content吧。那再往下class，那这个是呃，View star，然后呢，Container OK啊，就是映射的这两张图嘛，好，那这些类呢，我们写完了以后，那首先是不是先去整整样式啊，在这儿上来display flag，因为是纵向的color吗？OK。

这个时候我们看一下，呃，在这儿看上去目前还没有任何的影响，那这个时候呢，我们先去设置一个什么，那个图片的大小，就是A塔D的下边，它不有个它吗？那这个时候呢，我们看一下，我记得应该是60高呢，也是60CTRLS保存一下。是这个图吧，好，没有问题，那为了。让它和这个文字在同一行，怎么去做呢？哎，Vertical呢，然后呢，Middle好来我们来看一下是不是。

是不是在一条线上了，那接下来上左给他留个边距的话，我们之前是这样做的，就是给他这个容器是不是加一个padding就好了，好在这儿呢，来一个PA定来10RPX。OK，来顶开了，然后这个图片要和那个文字要有个距离，我们来个right，比如来个10RTX。好，那现在是不是有点距离了，没有问题，好，那么呃，当然了，那个字体，那个小的字体，你是不是也能去设置啊，比如说它下面是不是expand啊，比photo size，我们来24 24r PX，注意color的话，我们来个井号666，哎，井号666啊，大家在用这个RPX的时候，我强调一下，当你是特别小的东西的时候，你就不用RPX，那个时候可以写死都行啊，可以写死都行。

好，来井号666，是不是有点太模糊了，来个333。24呢，有点太小。那我们这个字体呢，往大去调一下吧。呃，我们来个28看一下。哎，差不多差不多，那么下边这个上硅谷这这个文本的话，我们叫的是company公司，哎，首先呢，在这儿我们来个40RPX啊方位呢，我们给它加粗一下，然后呢，左边呢，有一个十十个像素的内边距，那这样的话呢，才能和上面对齐好看一点，或者说是这样我们给它呢也加一个什么。加Ding吧，那这样的话和下面这个图片是不是也有点距离啊好再往下，那下边我们这个呢，叫的是detail image对吧？哎，首先呢，宽呢肯定是百分百，高的话呢，应该是460个像素，哎，460像素。

OK，没有问题，那下面这个内容。那再往下我们叫它，哎，Fo size，来个32RPX吧，好呃，然后首字母缩进的话叫text in，那缩进一个的话，我们直接就三十二二撇X。OK，没有问题，如果说啊，这是因为它的字一样啊，你可以让它是个行高，我们来个52PX看一下。这不有点距离了吗？哎，有点距离了，那想让文字和文字之间有距离用什么呀？呃，有一个叫word space，对吧，我们来个写大一点10R撇XOK，我们来看，那这个时候呢，哎，有同学可能发现说没有效果，没有效果还记不记得，还有一个叫lettery OK，那这个时候我给大家看一下这个，哎，效果出来了，哎这个时候我要问一下大家，哎它俩的区别是什么？就是word space和letter space。

嗯。其实word space呢，它更多针对的是英文的单词，而且呢，呃，它对中文是不生效的，那么letter space呢，针对的是字母以及中文，哎，字母啊，这注意字母单词是不一样的，OK，那这呢其实有点大，我们可以来个三个RPS就差不多。OK，那这整完了再往下看，那么下边这个就是我们需要去设置的那个，刚给他起了个叫什么，他下边的对吧？Image，哎，我们来一个。

可能这需要多大呢？这需要小一点，哎，这儿呢小一点啊，我来咱们去看一下原来的我写的是多大的。16乘16，那也就是说我需要在这儿去设置的是322PX，这是不是也应该是322PX呀。我们看一下OK，没有问题，那接下来那再加一个vertical middle好，然后呢，我们需要整它下边的什么，哎，Span这儿呢，字体的话，哎，小一点小一点。26RPX，然后呢，我们这个color让他来个333。好，我们看一下，哎，26是不是有点大呀。X22。哎，这个好像是。

他下面的span对的吧。然后呢，这呢二是二，哎，我就说嘛。这个字体好像没生效。套装S保存。呃，这size啊，CTRLS保存一下。是不是有了有了，那现在小把辣条好。嗯，差不多。那这个差不多了以后呢，我们给他加一些这个边距，哎，那这个好加啊，这个好加，那首先图片的话，我们是吧，让它往这个左边留点距离啊，那怎么整呢？Mark left对吧，我们来十个像素，来来十个像素，这是不是推了一下，这推了一下，然后再让文字左边再一推，是不是就都走了，哎，所以呢，把这个呢给到文字这一块，OK，来我们来看一下。

好，那这儿是不是就都推出去了呀，哎，那这样的话呢，我们这个基本的一个结构是不是已经搭好了，结构已经搭好了，然后呢，为了美观一点的话，你下边是不是可以给它整一个什么，哎，下面呢给它整一个border border，那在这儿呢，我们应该是啊erpx，然后呢，Solid来个井号一一，哎这个呢，待会呢，我们要用到它就是在最最下边，现在呢，其实看不到的。好，那这节课呢，我们主要是把list这个静态页面呢，哎搭建完毕，那么这节课呢，就讲到这儿。