14. 尚硅谷_Mpvue_列表页功能完成

好，来，咱们接着上一节课来继续，那上一节课呢，我们是去做了一个什么，去做了一个哎，这个分享的功能啊，做了个分享的功能，那这节课呢，我们去做哪呢？做这个列表页，那就是说在首页index页面点击箭头，然后呢去跳转到哎这样的一个列表页啊那首先要做这个列表页呢，我们先来分析一下啊，第一个我们需要创建一个页面，呃，然后呢，它的这个窗口的标题呢，应该改成这个图书列表，那至于说下边的内容这些数据呢，还是用们我们主页的数据，然后呢，里面的结构呢，其实不难，我们只需要写一个手就OK，那剩下的无非不过就是去干嘛啊，去编利它，去便利它，好，那这个时候呢，我们先去来到我们的项目，把这个收起来，Sta收起来，Src我们也收起来。

展开一下啊，在它的下面呢，去创建一个文件夹啊，因为现在我们要新添加一个页面叫box list，好整完这些以后，还是我们以前的套路，在这呢去创建一个index.view，那接下来我们在这个其他的页面里面搂一个什么页面的入口文件是不是就OK了？好，整完这个以后呢，呃，我们先去写一下这个列表页里面的结构以及样式，那要写这个呢，首先我们是不得把页面的路径写到我们APP的接对应的配置里边。OK，那在这呢，我们先去写一下，这呢应该叫po list，为什么放到第一个呢？同样的道理，待会儿我重新加载的候，让它先去加载这个页面，那样的话对于我们来说调样式的时候更方便一点啊好，那来到当前的界面，我们写一下，呃，在这儿呢，其实就是一个容器啊，左边呢，它是一个图片，对吧？中间的话那就是个info，在这里面呢，P标签，我们看看都有什么内容。

呃，书名作者出版社，那韩是老三样啊，那这个呢，比如说韩是啊，平凡的事件复制两份，那这个呢，作者对路遥，那出版社，嗯，这应该是出版社，好，那这儿呢，我们先空着吧，呃，待会的数据一定是动态的，然后呢，在它的右侧，哎，给个批发签吧，那这呢，比如说55。那剩下是不是就剩一个图片了，我先把它引入一下，还是用一张静态的图来去代替一下，OK，整完这些基本的以后，我们去写一下它的样式啊，在这呢，先给一个ID，那这个呢，叫books at least container，好，呃，那这个呢，叫什么呀，Class books。

Item或者叫book item更形象一点，那这个图片class book image，呃，这个呢，我们可以叫它book info更好一点。对吧，那这个class book，哎，Price价格好了，定义完这些类名以后，我们去写一下对应的样式，首先呢，在这来book item，那这个book a呢。到底怎么设置，我们来看，这是一行，这是一对，这是一堆，而且这三个它呢是水平排列的对吧？那这个时候呢，我们还是可以选择使用this display什么呀，哎，Flagx布局没问题，紧接着呢，我们去设一下这个图片的宽高，来来到我们写好这个项目怎么去量一下，来移上来70乘以70PX对吧？那也就是说我们这应该是140RPX，哎，这呢应该是宽，然后呢，再来一个高呢，也是140RPX，保存一下，来看一下效果，嗯，是不是出来了，那这个时候我们发现啊，图片和文字是不是紧贴着这个边框啊，为了美观一点的话呢，我会选择给它外面的这个容器呢，去加一个那边去，比如说拿一个T定啊拿一个12PX。

好，整完这个以后呢，我们看到这个图片是不是跟右侧的文本有点距离啊，那就是market right来个20个像素，我们来看一眼。嗯，是不是有点距离了，那还剩什么呀，韩剩就是这个价格应该是在右侧这儿了，呃，方式呢，有很多种啊，有很多种，我们可以去把这个价格是不定立到右侧，其实呢，也可以去干嘛，我们让中间这个宽度，不管是内容多宽，我占的宽度这么大，那这个东西是不是自动就跑到右侧了，那在这儿呢？呃，为了方便呢，我在这是用的什么呀？用的是占宽的那种方式，那就说book in for，这啊宽呢，我是这样写的Y字，比如说70%，那这样的话，大家看一下我们的这个，哎，55是不是自动跑到右侧，呃，然后中间这些三行文字呢，我们去给它设一下，呃，在这来，呃，我们可以来一个什么fo。

比如说来个30RPX，然后呢，行高的话也来一个，比如说来个45R PX，我们来看一眼啊，一共是140，我们可以去其实去评分一下，再大一点的。

嗯，这儿呢，来个55的。嗯，55是不是稍微有点大，嗯嗯，52吧。哎，那这样的话呢，是不是跟差不多跟这个图片哎，下边顶住稍微好看一点啊，其实整数吧，凑一个50也行啊，上下呢，我们都留点距离。那写完这个以后，就剩右侧这个价格了，那首先右侧的价格我们叫它book啊price，那在这呢，我们知道color一定是红色的，然后呢，Fo size稍微大01:30，然后呢，哎，Fo位去加粗一下来我们看一下效果，呃，这个稍微有点小啊，这应该是大一点两个40。嗯，是不是出来了，出来了以后呢，为了美观一点，下边应该有个下边框才对，因为待会便利是不是要生成多个呀，OK，那这个时候这好像稍微有点大，我们再微调一下来36，呃，来到它的item，这我们去来一个border bottom erps来so，然后呢，紧号E，那这样的话，一个完整的个体我们是不是就写完了，哎，那这个边框好像没加上来我们看一眼book item，这没问题啊，没题，那是不是因为嗯，我们先换一个solid，这少一个D，嗯，好的，来，那这个换回来应该是没问题的井号一看一眼，下边框是不是也有了，那接下来就需要我们点击过来，然后展现整个列表是不是就完了？那首先点击跳转的话，我们第一步是不是应该把这个音。

Index越回去啊，只有这样我们是不是才能看到这个页面，然后看到这个箭头，那接下来我们要做的就是找到对应的箭头index下边，呃，箭头呢，咱们还专门给它一个类，是不是叫more啊？那在这呢，Click to，嗯，Books list没问题吧，而且点击跳转的时候，我们还需要做一件事情啊呃，你是不是应该把数据带过去，因为数据源是不是在我们当前的页面，所以呢，在这儿我们直接就可以这样去写啊。呃，把水倒过去呢，一定是把那个数组，所以呢，应该是把books spring给到它，那这个方法呢，我们去定义一下。

那在这呢，啊，这个呢是跳转至哪个页面呢？叫图书，哎，列表页box来list来用到的方法To Books list嗯，在这呢，这应该叫booksy OK，哎，里边的东西呢，复制一份拿过来啊呃，这要写的叫books list，传菜的话也是一样的啊，Booksrray，对吧？那这个books array，这是不是也得转一下，因为你的数组如果你不做处理，是不是也会调用to呢？哎，所以呢，我们这儿应该也使用接森点string fine。

好了，那这个写完了以后，我们先看一下能不能跳转啊，过来点击一下。嗯，没问题，跳转成功，那接下来我们要做的是什么，就是将。哎，Book list页面变数据是不是动态展现就OK了，那在这呢，第一步我们怎么去拿那个数据，还记得吗？哎，在wanted里面。啊，忘了同学，我可以再给你打印一下瑞啊，你来看一眼，点击过来。

这是不是当前books list这个组件的实例啊，在这呢有个Dollar map，然后呢有个query query里面是不是找books RA啊，所以我们应该是什么this.dollar数map.query.booksr吧，来。this.dollar符map.books哎，不应该是它啊，query.booksry是不是我们要的，因为页面应用，所以呢，我们自动是不是应该把这个东西更新到啊data里面叫books b默认是个空数组，没问题吧，那接下来我们只需要什么？哎，Z点它。等于我们拿到的数据是不是就OK，好，那这个时候拿到了以后呢，剩下的就比较简单了啊，在这呢，我们只需要去v for去编译是不是就OK item啊，Index，然后呢，In booksry，那后边该加的东西给人家加上啊，Keep index。

来图片换一换，在这呢，item.image前面别忘了加问号，去让它强制解析，那说明item.title对吧？作者，哎，出版社还有什么价格，挨个我们去这个数据里面往出拎就OK，作者，哎，Other在这儿，出版社，嗯，Publish还有什么book，呃，Book price就是价格，价格的话就叫price，来把这个也提过来，那这个时候我们再来看一遍啊，点击。呃，点击跳转过来，这儿的数据出问题了，大家知道哪的问题吗？

来，我们可以分析一下啊，我们传过的数据一定是没问题的，因为我们组建主页面在用说明数据没问题，然后呢，我们在传的时候呢，咱在这个，呃，路由跳转的时候，我们是不是用了个jason.string five去给它进行了一下Jason的格式化呀，同样的道理，那你在拿的时候，你说要不要反编译一下，哎，一定要把，否则的话，你拿到有杰森的串是没用的，所以呢，把它丢进来，那这个时候呢，我们再去看一下，点击跳转。嗯，内容是不是就有了，OK，没问题，那这样的话呢，哎，这个列表页页面的内容我们就做完了，然后呢，还有一个大家看这儿的内容是吧，不是我们要的，哎，我们在当前的列表页呢，我们叫叫什么呀？嗯，叫图书列表，所以呢，针对这种情况，我们是不是应该单独的给我们的books list设置一个窗口的，哎，文字来，那这个时候呢，我们应该去创建一个页面，呃，创建一个文件，杰S的文件，注意这个我们上来就强调过，在这儿名字只能叫杰S啊，其他的它是不会生效的，因为你要跟最终的其他三个文件要同名。

好在这里边呢，我们要设置什么，设置这个窗口的文字，所以呢，我们只需要把这个拎过来这改一改，这个呢叫嗯，图书啊列表，那这个时候再来看一眼。点击，嗯，没问题，图书列表是不是也变了？好，咱们这节课呢，主要是去实现了图书列表从静态页面搭建到数据动态展现的效果，在这儿呢，大家要注意，我在路由传参的时候，传一个数组，我们需要阶层格式化，在传到我们列表页的时候，你在获取数据的时候还应该调用pass，是不是应该反编译一下，OK，那咱们这节课呢，就讲到这里。