15. 尚硅谷_mpVue_电影频道静态页面搭建.avi原创

好，咱们继续啊，咱们把这个详情页整完了以后呢，接下来我们去整哪个呢？去整那个，呃，电影频道好，整电影频道的时候呢，哎，就这个页面，那在这儿呢，我们主要是去练习一下发送架子请求，也是前后台交互，那下边这些配置呢，比较简单啊，比较简单好。那这个时候呢，我先把其他的关了，把这些呢都收一下啊收一下，然后呢，我再去这个pages下边咱们还是再去创建一个。我呢叫它movies，哎，这个文件夹，然后呢，在这个下面呢，把我们应该写的东西呢，去写上啊除了它，嗯，还应该有一个组件，对吧，那这个组件呢，我们叫它movies走你。这儿呢，我们去标识一下吧，Movies啊，组件好，那这个时候呢，我们是不是还得去配一个东西，就是它那个说明就杰森啊，那这个呢，我们随便去搂一个吧，就这个。

CTRLC哎，过来，哎这个呢叫电影。列表好，那把这些整完以后呢，呃，然后呢，我们还需要配置一个，我们知道在使用ta bar的时候，是不是应该有一个全局的配置呀，那这个配置呢，比较简单，我直接呢把咱之前那个拿过来，哎，在这儿呢，就不浪费时间了，好。呃，如果说没看过我们原生小程序视频的同学呢，你可以去在哪找呢？我和大家说一下啊，在这个框架这，哎在框架这框架的上边，这不有个全局的配置吗？往下这不table别棒吗？哎，里边都有详细的说明，好，我们把这个配置完以后，因为又是一个新的页面，所以呢，在这儿我是不是应该去重启一下这个n PM start呀。

重新启动完来到我们这边，哎，他说呢，我们这个我去刷新一下啊，刷新一下，他说这需要定义，定义是为什么呢？是因为我们在这儿，我在这个上边是不是没有写啊。好，那我们干嘛呢，我去复制一份，复制一份呢，在这儿我应该是把它改成什么movies，然后呢，重新编译一下。哎，那这个时候还报错，再报错呢，就说明什么说明啊，我们这个启动呢，应该是早了一点来，再让他呢重新启动一下。好，那这个时候还报错，还报错的原因我们来找一下吧，正好是看一下如何去排错啊，那这儿pigs我们是不是写了这个may呢，那很我看啊在这我们这个pages movies下面的may呢，哎是没有什么问题的啊，没有什么问题的，那呃，Movies咱们看一下我刚刚定义的这个名字，哎也是没有问题的，那其实只有这我们这个入口文件呢，没有去写，然后呢，在这儿呢，把这些哎基础的东西呢，去给它写上port。

嗯，这呢，我来个大写，因为它是一个组件Mo vis，然后呢去from啊。当前路径下的movie这个组件生成一个它的实例啊，等于另用一个V，然后呢，把这个组件扔进去，然后呢，我们去挂载它，好整完以后这很有可能。哎。出来了是吧，出来了我们看一下对不对，那现在是不对了，在这儿呢，提醒大家不要忘了啊，我也再强调一遍，当你使用table bar这种界面的时候，那你想想你在主页面这我们之前是不是有一个跳转叫navigate呀？

在这儿navigate是不是不能应用于tableboard界面啊，在这呢，我们要改成什么呢？它有一个叫Switch。对吧，那这个时候呢，我们再来看一下。呃，应该是没有什么问题，Switch啊，最后呢，我们会证明一下啊，证明一下。那这个时候大家看啊，Ta bird已经出来了是吧，现在我们就去写这个电影列表的一些哎样式以及结构，好，那这个时候呢，把诶下面的命令行这关一下来到我们当前这个movie里面，那其实在这儿呢，还是比较简单的啊，比较简单的首先我们去写一个结构，哎去写一个结构，我们来看它是什么样的。

来把这个整成全屏，然后呢，在这一块呢，我们去写一个，首先它是不是有个image图片，那还是去测试的话，我们去找image的下边index下边的car.jpg，那中间这还有一个就是三行什么文本呀，三行文本好，那这个东西呢，我们可以给他整什么整P标签。哎，是不是就可以啊，在这儿呢，比如说我们来个哎第二个吧，大家熟悉的霸王，哎什么呀，这应该是霸王哎别姬。网吧了，呃，霸王。不，别急啊，别急。OK，那霸王别姬有了，那接下来还应该有一个P标签啊，这个呢是年份对吧，1994再来一个P标签，OK，那这个呢，是导演。

哎，我切换一下啊导演，哎，在这呢，我们就写个张陈凯歌好，那这边写完了以后呢，我们再往下来看，还有什么右侧这是不是还有一个评分呀，所以呢，在这我们再来一个，就整个div或者说是P标签是不是都可以啊，比如这来个9.6。好，那这些整完了，我们去列一下类吧，Class啊，那在这儿呢，我叫他movies，哎，Container，因为最终我们是不是要遍历的是这个呀，那这个我们来一个movie movie，嗯，Movies什么image啊，Class，哎，统一一下这个呢叫什么？呃，这个首先它有个电影的名字，年份。

是不是还有一个导演呀，哎，还有个导演，那在这呢，我们可以叫他什么英付就详情嘛，哎，详情好，那下边这些分别去列一下吧，Movies at name。没问题，来把这个呢，我们去复制一份，走走，你给他一份，那接下来这个呢，哎，我们可以换一下叫一。下边这个呢，呃，导演director DR，好，再往下这个呢，我们叫它评分。那接下来我们是不是就可以写一下它的什么样式，好，那这个呢，Please play flex啊在这我还是要说一下啊，我们之前是不是要去设置它那个flex，它主轴的方向。好，那现在呢，因为它是横向布局，而flex默认的那个主轴是不就是横向的呀，好，所以呢，在这呢，我们不需要再去设置啊，不需要再去设置，那这个时候我们来看一下我们的。

来到电影频道是不是就是这样的呀，这不一块，这是一块，9.6是一块，然后呢，我们分别去设置一下它里面那些样式，这儿有个图片对吧，诶图片，那这个图片呢，哎，我们。呃，就往这边拉一点。首先是不是要有个宽高，那这个宽高的话，我们可以参考我们之前的，那在这的话来移上去，我们看64乘以64，注意它是什么像素呢？是CSS像素，所以在这儿我们要切换成RPX，也就是我们的哎，物理像素是它，那再来一个，这呢也应该是什么128RPX来走。

是吧，没有问题啊，那加一个编剧的话，我们应该是去给他这个容器加你比如来个10RPX，那这个时候呢，为了方便一点，我会把这个movies呢，哎提到上面，省得每次呢，我们还需要再去点击它，好，那这个图片这呢已经出来了。然后图片和文字是否会有一些距离啊，有一些距离，那这个时候呢，我们可以怎么去设呢？比如说在这儿，哎，Right，我们来个20个像素去推一把，哎，去推一把，OK，那这个9.6这个是不是在这一侧呀，哎，在这一侧，所以呢，我可以把中间那个，哎，Move in for。是不是他我们给他一个宽度，你比如说来个70%，哎，最简单的一种啊，最暴力是不是把这个推过来了，那我们分别去设置这三个的样式来第一个。

Movie什么？哎，第一个是电影的name是不是他好，呃，Fo，我记得应该是32R PX，哎，Color的话，嗯。我们应该是在这写啊color的话走，嗯，我们来一个333好，那下边这个我记得也好整，走这不有三份吗？那有三份我们去稍微让它缩进一下。走你好，那这个呢不叫name来，这个叫一，这呢应该是28，这我们再换一个，这是999，然后呢，下边这个导演点啊好，这呢应该是多少呢，是30，那这个呢，我们给它换成哎666。好，我们来看，哎，这样是不是差不多啊，然后呢，给中间这个加一个上下的Y边距Mar，比如说我们上下来个5R PS左右呢为零。

那这个时候来到这一侧，我们看一下是不是就差不多了呀，那右侧这一个评分，哎，我们还是复制一份过来平分，这呢我们叫它什么叫RA，好在这儿呢，首先这个可以大一点，然后呢，为了突出一下的话，我们可以来一个加粗，那这个颜色的话呢，它应该是大红。哎，大家看是不是出来了，好，然后呢，每一个列表它是不是应该都有一个下边框呀，所以呢，我们会找到上边这个容器，哎，Bottom erpx，然后呢，Solid再来一个井号一，哎，那这个时候应该是都出来了，那基本的结构我们已经搭好了，好那这节课呢，我们先讲到这里。