微信小程序開發（八）————多個文章列表頁的實現

昨天有讀者給我評論說希望我能夠把代碼以文本的格式呈現出來而不是用圖片，我想了想這個方法不錯，在這裏我只把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就可以獲取啦。我們編譯一下：