在拿到效果圖后不要先急著去寫代碼，而是要去分析一下頁面的整體結(jié)構(gòu)，用什么方式定位和布局。小程序里建議使用flex布局，因為小程序?qū)lex的支持是很好的。
上一篇博客中完成了輪播圖部分，接下來繼續(xù)完成下面的新聞列表部分
新聞列表部分整體使用flex縱向布局比較合適， 先把頁面內(nèi)的元素標(biāo)簽和類名寫好。
<view class="post-container"> <view class="post-author-date"> <image class="post-author" src="{{item.avatar}}"></image> <text class="post-date">{{item.date}}</text> </view> <text class="post-title">{{item.title}}</text> <image class="post-image" src="{{item.imgSrc}}"></image> <text class="post-content">{{item.content}}</text> <view class="post-like"> <image class="post-like-image" src="{{item.view_img}}"></image> <text class="post-like-font">{{item.reading}}</text> <image class="post-like-image" src="{{item.collect_img}}"></image> <text class="post-like-font">{{item.collection}}</text> </view> </view>數(shù)據(jù)綁定很重要，那么多的新聞列表，不可能每個新聞都復(fù)制粘貼一下代碼。況且小程序還限制在1MB大小。
我們把數(shù)據(jù)內(nèi)容單獨放在一個文件夾里，模擬從網(wǎng)絡(luò)加載的情況
如圖，在根目錄新建一個data文件夾，里面新建一個posts-data.js文件 
在posts-data.js里定義一個local_database數(shù)組
var local_database=[ { date:"Nov 10 2016", title:"文章標(biāo)題1", imgSrc:"/images/post/crab.png", avatar:"/images/avatar/1.png", content:"文章簡介文章簡介文章簡介文章簡介文章簡介文章簡介文章簡介文章簡介文章簡介文章簡介文章簡介文章簡介", reading:"92", collection:"65", view_img:"/images/icon/chat.png", collect_img:"/images/icon/view.png", }, { date:"Nov 20 2016", title:"文章標(biāo)題2", imgSrc:"/images/post/bl.png", avatar:"/images/avatar/2.png", content:"文章簡介文章簡介文章簡介文章簡介文章簡介文章簡介文章簡介文章簡介文章簡介文章簡介文章簡介文章簡介", reading:"88", collection:"66", view_img:"/images/icon/chat.png", collect_img:"/images/icon/view.png", }, { date:"Nov 25 2016", title:"文章標(biāo)題3", imgSrc:"/images/post/cat.png", avatar:"/images/avatar/3.png", content:"文章簡介文章簡介文章簡介文章簡介文章簡介文章簡介文章簡介文章簡介文章簡介文章簡介文章簡介文章簡介", reading:"123", collection:"55", view_img:"/images/icon/chat.png", collect_img:"/images/icon/view.png", } ]別忘了在posts-data.js文件最后加上輸出
module.exports={ postList:local_database }例如用戶頭像圖片的路徑，用雙大括號括起來 里面和數(shù)組里定義的要相同，然后前面要加上item. 意思是綁定數(shù)組里定義的avatar，代碼如下：
<image class="post-author" src="{{item.avatar}}"></image>先把posts-data.js文件引入：
var postsData=require('../../data/posts-data.js')然后在onLoad: 函數(shù)內(nèi)設(shè)置Data的值
onLoad:function(options){ // 生命周期函數(shù)--監(jiān)聽頁面加載 this.setData({ posts_key:postsData.postList }) },在wxml要循環(huán)的部分外面加上<block> </block>標(biāo)簽
語法是：
wx:for=”{{數(shù)組名}}”
——>csdn免積分下載
微信： 
支付寶： 
新聞熱點
疑難解答
