微信小程序开发（八）————多个文章列表页的实现

昨天有读者给我评论说希望我能够把代码以文本的格式呈现出来而不是用图片，我想了想这个方法不错，在这里我只把wxml和wxss里面的代码以文本格式呈现，js的以图片呈现，因为js是重点，所以希望大家能够跟着敲一下代码。

 

在上一章中，我们学会了文章列表页的制作，但是大家仅仅是学会制作一个文章列表页，如果我有两个文章呢，那是不是把代码复制一份出来，那我有100个文章呢，那不得累死。。。。。。今天我带领大家实现多个列表页。我先把上篇文章的代码以图片的形式呈现出来，这章以后以文本格式呈现，如图：

文章列表代码

我们首先打开post.js页面，在post.js的onload方法里面我们把数据现写好,如图：

在onload方法里面定义一个数组叫做posts_content,里面有两组数据。我们上一章说过，数据我们是写在data数组里面，那么我们怎么能让这个posts_content放在data里面呢，如图：

 this.setData 方法写在 post_content数组之后,即,onload方法中.

this.setData方法就是把数据放到data数组里面的，其中posts为名 posts_content为值，这样就把posts_content里面的值传给了posts，有了这个posts，我们就可以在wxml页面进行渲染啦。

在渲染之前，我们想一下，我这个posts里面有两个数据，我们怎么能够一条一条取出来呢，这里就用到了微信小程序里面的循环，大家看一下代码：

循环

我在view标签的上面加了一个block标签，block标签本身没有含义，我们通常会把for循环放在block标签里面。

循环是用wx:for="{{posts}}"这里的posts就是我们在js里面写的posts，这一句话说明我们已经在wxml页面拿到了在js定义的数据并开始循环他，wx:for-item="item"意思是我们的数据是一个数组，item的意思就是每循环一次，它就指向当前循环的数据，比如我有5条数据，第一次循环，我的item指向第一条，以此类推。上图的代码里面我写了个{{item.author}}意思就是我有5条数据，第一次循环，那我的item是不是第一条数据啊，我想取第一条数据中的author字段，那么我就用item.author就可以获取啦。我们编译一下：