08. 尚硅谷_Mpvue_底部tab栏搭建

好了，咱们接着上节课来继续啊，上节课呢，我们是把这个窗孔的配置啊搭建完毕，那这节课呢，我们去整什么？咱们先不着急去写里面的内容啊，我们先去把下面这个退半写完，大家看呢，我退半下面是不是有三个那对应的按钮啊，那也就是说我需要的对应的是不是应该有三个页面，那第一个index我们已经有了，那接下来呢，我们先去整两个页面，然后呢去完成一下table配置，好其中有一个叫搜索图书，一个叫个人图清，那这个时候呢，来到我们的配置下面，我呢先去创建一个叫search book，好这个代表搜索图书，然后呢，再来一个我们叫它。嗯，Personal个人中心，那在它们的里面呢，我们分别的去创建的index来在这呢，那这个叫。

Personal组件，然后呢，我们可以把这个也复制一份吧，来，这叫ER。不可用好，所以这book可用里面呢，我们去把这个名文本呢，给它换一下，标识一下，那现在我们还差的是什么，是不是一个页面的入口文件，那把这个呢也给它配置上来，那页面里面的内容创建完了以后，那第二步是什么呢？来我们先把这个关掉，它我们应该有自己的套路，第二步就是说你要主动的去APP的阶层里面是不是写对应的页面路径啊，那在这呢复制两份，呃，其中一个呢叫personal，还有一个呢叫I search book。没问题，那为了接下来我们调试方便的话啊，其实我们可以让他上来先去加载哪个页面，是不是加载index就可以了，那因为我们的first view是不是已经写完了，好，那这个时候整完它以后，我们还要做什么呢？咱们窗口的配置。

哎，写完了还应该继续把table bar的配置也给它写一下，那那这个时候呢，我们来看一下这个table底部table栏的表现，点击它过来，呃，其实这儿呢，有很多的内容啊，有些不是说必须的，我们在这儿呢，直接去说一下这个啊，其中list它上面呢，有个list数组table的列表，那就是说你里面到底有几个table，取决于当前历史的选项。嗯。Be，这大家要注意，最少是两个，最多是五个tip，也就是说你还不能乱写，那它对应的呢，是一个数组啊，至于说数组里边放什么，这有详细的说明，这个我们之前也用过啊，也用过来先把基本的写一写，首先呢，在这我们应该有一个table bird对象对吧？里边呢应该是个list，它呢对应的是个数组，那list的里里边每一项是啥呢？这说的很清楚，每一项都是对象，而对项里面的属性值啊如下啊，Page past呀，Text呀，那这些呢，自然因为讲过啊，我直接就去配置一下，那首先呢，给大家整一个对象，这是page pass，好，那在这呢，这个路径也是一样的啊，跟路径下边我们要参与paperboard第一个。

是不是他呀，这呢，也别忘了加什么，加这个刻录镜吧，应该是需要啊，来再往下，我们再来看文本。那这个呢，文本就是ta栏底部的文字，那第一个呢叫图书。来我们看一下是不是叫头数啊，叫图书列表来，那这个时候呢，在这再加一个列表，好再往下还有什么呢。

一个叫e pass，一个叫selected I passs，那这个呢，是针对我们啊下面的小图标了，在这呢，我们选用的叫呃，Static下边images下边来去找一下。其中有一个叫tips，那现在呢，我们先去用两个呢，先用这个book，嗯，那这个呢，是我们想要的啊，注意这两个是一段，一个是呃灰色的，一个是高亮的，好，现在呢，我们先去用哪个，用这个book，那所以呢，先加一个tip下面的它，那还有一个选项叫I selected I pass，那这个时候呢，在这。只需要把哪换一换，把这个拎过来，然后呢，后面这个书名一换是不是就OK好，那这样的话一个配置就写完了啊我呢，为了方便直接再去复制两份，那其中第二个呢，我们应该叫它什么呀？叫这个search book，那search book的话直接把它领过来，接下来这个搜索图书呢，我们用的是哪个，用的是这个。

来看一下这个图标，呃，是这个啊，那这个呢，对应的是哪个图片呢？应该是对应的是这个，诶不应该是看一下这个图do，呃，这呢是随便找了几个小图片啊，现在呢，我们选用这个todo，那todo这呢，把哪的话呢，把这个换掉它，然后呢，Active也是一样的啊，把它换掉，最后一个我们应该是把这个personal提上来，这个名字还有什么呀，Personal的话，这应该是me来把这个换掉，嗯，同样的me active是不是把它换掉，然后呢，去把这个文本改一下，来搜索图书，那这个呢叫个人。中心OK，那在这儿呢，因为我们新创的建的页面啊，所以呢，千万不要忘了重新去给它编译一下。

好，这边启动了以后呢，我们来看一下效果有没有出来啊，那那这个时候呢，我们来到当前的项目。嗯，他如果编译完了，这应该会刷新一下的。嗯，刷新一下，哎，这说了这个p pass是不是不应该以杠开头啊，那也就是说在哪呢？在这儿这个东西我们还要的吗？不要同样的，这也去掉，这也去掉，来再看一眼，让他编一下，呃，编译完了以后，嗯，这应该是还有报错，嗯，刷新一下p pass，咱们现在已经把什么，已经把这个路径去掉了，没有问题，他说是在search book的MGS里边。嗯，有什么问题啊，有说这个模块未找到哦，这里面呢，我们应该叫什么，应该叫index.view对吧，那刚刚呢，我们是直接粘的它文件夹的名字personal，这是叫in，没有问题，那这个时候来来到这个页面大家看。

这是不是就出来了啊，没问题啊，Personal搜索图书的，然后啊主页好，这节课呢，我们主要是去搭建了一个table，那视频先停下。