17. 尚硅谷_微信小程序_detail详情页数据动态展示.avi原创

好，咱们接着上一节课，上一节课呢，我们是把这个静态页面讲完了，那么现在我们要把这个数据动态的写活啊，那这个时候来看一下之前的需求是什么样的，大家注意啊，我回退一下，把调试器关掉它。这是一个列表，我下边这个列表的每一项是不就是我们一个template呀，那它其实每一个是都有一个点击事件，你看我就点击这个。这是不是跳转到我们刚刚写了个，哎，DT要详情啊，而现在显示的数据和你点击之前这的是不是一样的，只不是详细给你展示一下啊，也就是说我们首先第一步要考虑的是不是从刚刚这个列表页点击要跳转到当前的这个详情页啊，OK，那来到我们的这个里面，那首先你要从列表去点击跳转，那就不能把它放到最上面了。

你是不是得把列表贴上去？CS保存一下。OK，这是我们的列表页，那先找到列表页的结构。那这个是不是就是下边这些每一个板块啊，哎，首先我们要给他绑定一个事件，大家还记得用什么绑定吗。啊，Find或者说是用catch啊，那这个时候呢，我可以用，因为我们也不需要它去冒泡，我可以用它，因般我们就叫它的to detail去详情页，OK，那这个方法千万别忘了，你是不是要去定义一下，嗯，定义一下来，那我们我就放到onlo的下边吧。来放这那这个呢，方法是干嘛的呢？点击来跳转到detail详情页，OK，那记不记得那个方法叫什么。

微信点NATO是它吧，OK，我为什么用它呢？其实我那天还给大家讲了一种方式叫redirect。这个是保留当前页对吧，那direct是关闭当前页。哎，我先给大家证明一下，什么叫保留当前页，什么叫关闭当前啊，我先把这写完，配下边的DT下边的。OK，哎，其实我们之前在生命周期函数，我有这两个没提，因为当时我们测不到on hide，还有on unload，对吧，console.log，那这个是什么呢？叫页面。

隐藏一个叫页面卸载，我问你隐藏我页面还在不在，没有销毁吧，而这个如果说走的是阿lo，说明页面是不是销毁啊conso.log OK，那在这呢，我们去标识一下页面卸载。来到方lo上来，这两个肯定不会调用。对的吧，大家看到接下来我去点一下，我因为我刚刚不是绑定那个事件吗？你看哪个打印了页面隐藏来，再想一下，我们这现在用的叫navigate吧，他这么说的是保留当前页面，那如果说我把它换成。那这些。来，CTRLS保存，我再重新去跳转一次，走你。

这不是页面卸载吗？页面卸载就是他把刚刚那个页面先销毁了，先销毁了啊，销毁了以后你这是不是就不能回退了啊，因为咱们这的需求现在是要那个要能回退，所以呢，我还是给他换成navigate。自己一回车的话，它会自动补全，他不管你下边有没有，所以咱不要的我就给他删掉，OK，那那现在这个跳转呢，其实很轻松，我们已经做完了，那真正的问题是啥，你跳转完的数据必须是对应的才对。嗯，那个数据很明显是静态的，那接下来我们要考虑一个问题，这显示的数据和外边对应，也就是说我详情页面必须要知道一个事情。你是点击哪过来的。懂我的意思吗？

你点哪个过来的，因为啥数据源，我们有data这个list data这个GS这个数组是不是有。你是不只需要告诉我，你点击的时候，你的下标是谁，我就能取到对应的数据吧？因为啥这个下边我随便点击一个，它是不是通过遍历这个数组出来了，那所以说我们要知道一个东西叫下标。那这个时候我们来看一下啊。这是我们的结构，在这绑定的事件，那例GS这哎，这是我们的方法，那在这我怎么知道你的下标呢？来我们来看官网给大家说一下。艾特幺六三点。

那稍等一下，我这边扫一下。OK，来，来到我们的文档。呃，开发小程序开发，我们现在要关注一个东西啊，来到框架这，哎，我们还是去找一个叫事件的东西。来这儿有一个案例。大家看我在这利用BY的T是不是绑定了一个事件啊，然后我在P也是在GS文件里面，我是不是定义了这个事件了。对了吧，注意看这是不是有event，其实这个我们理解世界的回调函数对应的是不是都有一个事件对象啊叫哎，重点是看什么，我cause log event下边告诉你可以看到log出来的信息，大致如下。

哎，这些信息很多，我们是不会一个一个去看的，大家看一下这儿。我这很明显是一个标签属性，一个叫前面一个叫data杠什么什么的东西，后边对应什么叫做V，来，我们往下找一个东西，或者先看这个吧。这有个叫的东西，你有没有发现它下面有个hi叫hi，那这个是什么意思呢？看着得塔杠是固定的，这不是有氦氦什么对应的，这是一个介值对吧？哎，其实这是向是点击世界回调函数里面传数据的一种方式。

Data塔杠是固定的，后边这你写什么都行，然后你可以去对应的对象里边去取。首先你大概要能看懂它。嗯，大家了解了这个以后来，那我在咱们这，哎，咱们去写一下list，我们找到结构，注意你看着啊，我一个data塔，它出来个它这不结构是固定的吗？因为后边的东西是不是需要你自己去写。那在这我整一个东西叫index，标识一下，咱们是不是想要找到一个东西叫下标，那在这你说我应该写。不过正好是他，你看上边的时候变力啊，那变力的每一项是不是就是对应的下标啊，这一个下标。OK，然后呢，来到GS这一块，找到它对应的事件，这是不是应该有一个event呀，来其他的我们不考虑，那在这呢，我去cons.log这个event，我们来看一下CTRLS保存一下，打开调试器，我就点第一个所里。

注意这是不是打印了一个对象，打印了一个对象来，我们往上拖一点，大家看一下，找一个东西叫current target。哎，这有个贝塔S是个对象，对象里面是不是有个介质，对啊，In为零，首先这个下标对不对。对的吧，这为什么叫index呢？我刚刚是不是写了个D塔杠1X呀，OK，来我们后退一下，再测一个，我们来到这个，注意现在的下标是不是为一了，走哎，他又打一个对象来看一下。对的吧，啊，那下标这对了，以后我在这儿能不能拿到一个下标呢。

Index等于什么点，Target data set their index。啊，那这个是哎，获取点击跳转对应的下标。嗯。你说我，哎，这个应该缩进一下啊，你说我在这拿到下标要干嘛呢？我们现在拿下标的位置大家注意一下是在哪个页面list，而真正想要下标的是哪个页面detail，就是说现在我们只是找到了它的下标，那接下来我们是不是要想办法去传给D。

其实船你只能考虑这，因为其他的地方他俩根本没有打交道。懂我那意思吗？哎，这怎么传？哎呀，大家也好理解，我直接就写，这不一个URL吗？问号后边就传三，比如说我写index等于注意我能这样写吗？肯定不能你这样写，它是一个普通的字符串了吧，验下这个1EX是不是一个变量，所以这应该干嘛，我直接去啊，有同学说用模板字符串也行，我因为这个太简单了，我还不如直接拼一个串呢。懂吗？来，好，那现在我们已经给它拼起来了，重点是在detail里面如何去拿，我们先把这些干扰的都关了吧，关掉。关掉，来来到detail里面这个DGS。

好，大家看啊，这already和on他们三个这样看上去有什么区别？你会发现这它自动帮你去写了一个行参，对吧，写了一个行参，那这个options其实我们一直还没用过的，一直没用过它这个到底是干嘛的？对，反映一下万能的conslo，来一个options。来，我去CTRLS保存一下。咱看着我到DTL，我到第是GS，我先不拼串。我是不是还原了，嗯，多上那个什么啊，CTRLX保存一下，咱们先不平出，我去跳转一下，注意看，那我要看打印option的东西啊。

默认是不会给你传一个空对象进来，这很明显对我们没有什么太大没用，哎，接下来你看着我还原一下这平串的，我们现在是给它传了一个一个X等于一个值，CTRLX保存一下来再去跳转走。是不进来了。啊，它的原理是什么样的，你通不管是通过navigate还是什么，这是通过导航链接，是不是跳转到我当前的页面啊，只要你这传写参数了，哎，我这相当于是个URL吧，哎，这个是不是有点像我们一个HTV请求里边那个查询字符串一样啊，只要你传参了，那么我会收集你的参数为一个对象。没个对象。那也就是说现在在叫GS。我能不能拿到一个下标为一个index等于option.index。

可以吧，没问题，OK，那下标也有了，哎，我们在这这一步是去获取。参数值，那index有了，大家说我们接下来要干嘛。数据源咱们有没有有，那我通过下标是不是能取到数组里面对应的某一个对象，然后页面上要显示的数据是不是就来源于这些对象？OK，那既然要用那个数组，那我们是不是得在这去引一下，所以我们在这呢，先去let几个贝塔等于什么块，这个我们也练过，那怎么去找来着，这样对不对，我直接写。

嗯，我给大家测一下，嗯。怎么了？对的吧，来大家可以看一下啊。看到这个没？咱们之前是不是说过这个问题啊，啊说过这个问题，那在这应该是怎么样的，上一级再出去。哎，对的吧，来这儿呢，我也给他打印了一下，没有问题啊，咱们打印的应该这个，因为这个是我们之前list的页面打印的。啊，历页面打印的OK，这个数组有了，那接下来你说我要干嘛呀，取出来放到哪？重点是那很好，因为页面要使用的数据是不是要问data塔去要啊，所以我们在这呢，可以先来一个，你不要叫它detail obg上来是不是有个空对项，接下来我们要去做的事情是更新贝塔中，哎，DTOB阶的状态，我们可以这样说，其实也是更新状态嘛。

或者叫状态值，This点什么呀？Set data OK，那在这里边来个detail OB间对应的应该是什么？贝塔点它里面有个属性，应该是不是叫它吗？还有什么，这是这是把那个数组了。这不咱刚取到的index吗？哎，其实我还能做一些事情，大家看着啊，我直接去整一个index。你说我这是干嘛？

我是不是相当于把下标也给它存进去了，对了吧，我这初始化一个，我这直接放了一个，哎，注意同名的属性是不是可以省略不写，OK，来CTRLS保存一下，打开我们的调试工具，那这个时候我去跳转一下。我要确认一个事情，那我得看APP data来在这往下看，D t obj，这很明显，对象是不是进来了，下边是不是也有了。没有问题，那既然对象里面有数据了，那我们接下来就可以去整一个东西了，把这些是不是写活啊，首先在这这个大图不要它了啊，这首先叫dt OB接点，注意只要写活的地方是不是都要它，所以为了节省时间呢，我先这样。

这个应该是把它。都盖住，呃，公司还有什么呀。好像只有这个了，嗯。没有问题，那也算，接下来我们就需要去对呃，对应的里面去找这个。就OK，来看这吧，我们要什么呀？首先上面是不是有个大图来挑预备着，那么接下来这个是那个。头像宝贝。C，来，把这个维卡拿过来，呃，再有这个是什么来着，呃，这个钢铁侠。发布于发布于，那那这应该就是date了，那下边这个text，这个text呢，应该是那个公司，我在这叫他叫这写的叫title，那还有什么。

剩最后一个了，对吧，最后一个这儿呢，是我们对应的数据叫他。CTRLS保存一下。来，我们挑一个贾静雯的这个。对的吧，啊，呃，在这呢，哎，这些字还是有点不太好啊，你们拿手机去看一下，应该会好很多好很多，呃，我正好说一个问题啊，之前有同学问过我这样一个问题，那老师他这个一共才两兆，那你说呃，如果说我这个图片都放到本地的话，岂不是大于两兆了，实际开发当中，这些图片啊是不会放在本地的，肯定不会放在本地。呃，大家想一下淘宝，你们去访问淘宝网站上面是不是有各种各样的图片，那些图片都是在本地吗？不是都会放到对应的数据库里边，然后部署到服务器上，我们打开淘宝或者京东那些网站，你去右键查看一下，找到图片你会发现都是一个对应的地址，对吧？都是一个地址，而这个地址呢，你也可以去访问它，它是不会放到本地的。

嗯，OK，那这节课呢，我们先就讲到这。