首先第一步我们肯定是要创建文件夹啦，我们选择在pages目录下面的post目录里面创建post-detail的文件夹，如图：
教给大家一个小技巧，其实大家不用在目录上创建，挺麻烦的，大家打开app.json在pages目录里面输入我们想把post-detail这个目录放置的路径就行，即”pages/post/post-detail/post-detail“，然后刷新一下就出来了，如图：
这个post-detail文件的样式啥的我就不给了，大家应该尝试着打造属于自己的style，不能光用我的，哈哈。大家还是在post-detail.wxml文件里面输入个”hello world！“测试语句，大家肯定能够想到这个得用到跳转，即文章列表页到文章详情页的跳转。大家看到这里的话，脑子就应该有个想法了，自己想想应该怎么进行跳转，毫无疑问，这个第一步是先给文章列表页添加一个点击事件bindtap，如果忘了的话，请看看我之前的文章，嘻嘻。我们找到post.wxml文件，给列表页最外层的view标签添加事件，如图：
bindtap=”detail“大家还记得这个意思吗，绑定一个事件，事件名称叫做detail，大家打开post.js进行编写detail事件，如图：
这次我用的跳转方法是另一种叫做wx.navigateTo()方法，它和wx.redirectTo()方法的区别是什么呢？大家自己看界面着不同吧，哈哈。这个方法写完之后，是不是就可以跳转了呢？当然可以啦，那么跳转是跳转了，大家想一下，我有五个文章列表页，那么我怎么能够让文章跳到属于它的列表页呢，大家应该能够懂我的意思吧。想解决这个问题，就得给每个文章一个ID，上篇文章我给大家准备数据里面就有一个postid，如图：
postid是给每一个文章都分配一个id号，就相当于我们的身份证号，通过postid，我们就可以找到这个文章的详情页了，我们在在外层的view标签自定义一个变量，这里自定义变量都是如图的格式，data开头：
首先我们在function（）里面添加一个event，因为我们要通过这event来获取自定义变量，大家不用理解，就只需要知道这个envent是用来获取自定义变量就行。var postId=event.currentTarget.dataset.id 中
event.currentTarget.dataset.id ，event代表这个事件，currentTarget代表当前你点击的这个模块，也就是列表页，dataset就是所有的自定义数据的集合，id就是我们定义的id，串起来就是获取当前模块自定义数据集合中的id这个数据。有了这个postid，我们就要把id通过url带过去，如图：
然后我们取post-datail.js文件接收数据，在onload里面写上：
如果大家不知道为什么要在onload函数里面写的话，就自己百度吧，这个太简单了我就不说了。function里面有个options，options就是用来接受传来的id。这样的话我们就拿到了id，我们在post-detail.js的data里面把我上篇文章的数据复制进来，如图：
然后我们在onload里面添加如下代码：
this.setData我就不说啥意思了，我说说this.data.post，它的意思是获取data数组里面定义的数据，因为它是一个数组，所以我们把postId穿进去，就获取到了postId对应的文章了，然后我们在渲染到wxml页面，如图：
本文转载！！！！！
网友评论