11. 尚硅谷_mpVue_Detail详情页数据动态展现.avi原创

好，咱们继续上课，那么上一节课呢，我们把这个静态的页面呢，搭建完了，那这节课呢，我们就要实现什么呢？从上一个list页面点击跳转过来，点击跳转过来就是这样的。来，我先返回例子一点击跳转，并且呢，这的内容是我上一上一个例子页面点击这一块的内容，那首先要实现这个的话啊，也不难，因为我们也做过那第一步啊，我先把这些配置呢，关掉它，你是不是应该先把这个list页面调到前面。对吧，好，那对于我们来说，哎是这样的，那要点击跳转，首先是不是要绑定一个点击事件，那这个事件呢，我们得找到谁呢？找到我们之前那个模板。在这儿。对吧，那这是我们的模板啊，那因为不管点击哪里都可以跳转，所以呢，我们可以给它的最外层在这儿去绑定一个事件啊，比如说我们叫它to detail OK啊那这个to detail呢，相应的是不是要在下边哎，Method里边去定义啊定义那在这呢，它是去哎跳转到什么详情页，微信点呃，Nay。

呃，然后呢，Na。就是他navigate。To，对吧？OK，回车，这应该是什么？这应该是个他navigate，好，那在这里面是不是需要个URL，那首先我们会写什么能把这个写出来。那这个跳转我们看看行不行，行不行，来来到我们写的这一块，点击走你。

哎，它是不是可以呀，可以跳转来再点一个也可以，那跳转完了以后，就像我们在讲原生小程序的时候，分析的情况是一样的，你显示对应的内容，我是不是得知道我点击的是我这个列表里边的哪一个呀，那哪一个的唯一标识是什么，是它对应的下标对吧？所以呢，我们现在要去做一件事情，在这儿去跳转的同时，是不是还要加一个东西，哎，传参过去啊，好传参过去好传参的内容是什么？是吧？Index下标啊，那现在大家想想，我刚刚为什么把index也传给了我这个list tenl了，那在这呢，其实也比较简单，首先问号，哎，这应该是英文的index等于什么呢？这是不是要拼一个串raise点。

Index呀，那这样我们写完了以后啊，写完了以后重点来了。之前我们在拿那个数据，是在哪拿的呀？哎，有同学想到了在。什么load里面这是不是有一个什么options对吧，我去lo这个options我们来看一下。好，打开我们这个界面来到走。哎，是不是能传过去啊，那其实在options里，在unnold里面写很简单啊，很简单，但是呢，我上来就强调过，哎，在map view里边能不使用原生小程序的生命周期函数就不要用，哎，除非万不得已，那这个时候呢，除了onload啊，我先把它住了。我们用想一想，我们是不能使用什么。

我们可以使用我们唯有的生命周期函数啊，但是呢，在唯有生命周期函数还有这些选项吗？是不是没有啊，没有他，不过我们是不是有组建的实力对象啊。哎，那这个时候我们来看一下实例对象长什么样，点开。哎，你会发现这多了一个选项，叫Dollar map。对吧？Dollar map下边又有个query，哎，Query里边的值是不是正好就是我们想要的那个下标啊，来再证明一下，我们看第二个。那这个时候呢，下边应该又有个实例，找谁呢？找Dollar福map，哎，Query，这是不是也是一种方式呀，所以呢，在这我们可以怎么去取呢？你比如说我去let一个index，等于什么this.dollar map.query.index呀，也就是说我们可以哎使用这个去取。

取代谁呢？去取代我们在onload中的options OK啊，那这样的话呢，下标我们已经拿到了，那下标都拿到了，你说拿一个数据啊，其实不难，那接下来我们是不是要把整体的那个数组拿过来，然后通过下边去找list data中这个某一个对象就完了。因为数据是么在这儿好，那list data现在是不是在VX里边，哎，所以呢，我们要做的还是去找一个东西，哎，From view，那在这儿呢，我们要去写的一个叫map state。好，Map state是不是映射状态的呀？映射状态的在哪映射呢？还是在这个comput中。

哎，我这习惯性的多加一个什么，多加一个N啊啊好，在这儿呢，我们去写一下map state，那在这儿呢，数组，注意你要取的数据叫list tmp对吧？好，那这个comput的取到了，其实我们可以在那在哪去看呢？在mounted中来，我们去看一下到底有没有取到cons。来让它去加载一下下边这一个，我们去找一个东西叫叫什么叫list template，哎，大家可以看一下这是不是有啊，那也就是说现在我们已经拿到了数组。哎，之前有同学问过我一个问题啊，老师你在这为什么不去分，先分发再去映射呢？分发我们是在哪去做过？在list这是分发挂，那为什么在我们的detail就不需要分发了呢？

你想一下你分发的目的什么，才让那个star对象去拿到那个数组啊？啊，然后去映射，那当你处于detail这个界面，你是不是从这个界面跳转过来的，那我跳转之前是不是已经有数据了呀？哎，所以呢，在这呢是不需要再去分发，直接映射就OK，好，那在这拿到了这个数组有了，其实我们直接认点它下标是不是就能用啊，只不过为了方便的话，我会这样去写，我呢，还是再去整一个什么data。啊，整一个data，那在这呢，哎，我们还是把该写的东西呢都写上detail obg初始化一个空，然后呢，在mount里面，我是不是能去更新哎，State中的数据，好this.detail OB接等于什么this点刚刚我们是能找到这个temp，然后呢这写个哎这写个什么呀。

这是不是要写个index呀？对吧，那这个index比较简单的是这种做法，Raise点它，哎，我们直接在这点index是不是就可以。OK，没有问题，或者说是这儿都有这个东西了，你说。我是不是能把它放过来，那其实这一步我们也不需要啊，也不需要，然后呢，DOB间，那你相应的去填充对应的内容就OK了啊在这这第一个detail OB节点什么呢？来我们还得在这去找。呃，这是那个大图，然后呢，别忘了让它强制去解析好，那这一块呢，是我们的头像detail OB节点A，维塔对吧？那前面同样的还是要强制去解析维塔没有问题，呃，这呢是新华社，呃，新华社我们先把这个写好，同时呢，下边这是不是马上也要用啊，也要用你包括这一个。

还有哪呢？还有这个，那这个倚天同龙记咱就不要了，来挨个我进去填，第一个找到那个新华社，新华社应该是这个作者放到这儿，那这个呢，应该是。日期没有问题吧。呃，还有什么，还有这这个公司，嗯，公司的话我们是叫这个叫title，嗯，这个我能记住啊，然后呢，再往下这的话就是最后一个，最后一个是那个内容叫detail content，好，那这个时候呢，我们去跳转一下来看一下来第一个是不是对的啊，那换一个我们换一个贾静雯的走。哎，大家看这个是不是也是对的呀，哎，也是对的呀，嗯，OK，那这样的话呢，我们已经把这个数据，包括页面的跳转呢，都完成了，都完成了，好，那这节课我们先讲到这里。