微信小程序開發(fā)-新聞列表之新聞列表綁定開發(fā)教程：
1****割坠、效果圖預(yù)覽
2****彼哼、準備工作
在拿到效果圖后不要先急著去寫代碼敢朱，而是要去分析一下頁面的整體結(jié)構(gòu)摩瞎，用什么方式定位和布局。小程序里建議使用flex布局蚓哩，因為小程序?qū)lex的支持是很好的岸梨。
上一篇博客中完成了輪播圖部分稠氮，接下來繼續(xù)完成下面的新聞列表部分
3****、****wxml****部分
新聞列表部分整體使用flex縱向布局比較合適赃份， 先把頁面內(nèi)的元素標簽和類名寫好奢米。
{{item.date}}
{{item.title}}
{{item.content}}
{{item.reading}}
{{item.collection}}
</code>
4****、****wxss****部分
.post-container{
display: flex;
flex-direction: column;
margin-top: 20rpx;
margin-bottom: 40rpx;
background-color: #fff;
border-bottom: 1px solid #ededed;
border-top: 1px solid #ededed;
padding-bottom: 5px;
}
.post-author-date{
margin: 10rpx 0 20rpx 10rpx;
}
.post-author{
width: 60rpx;
height: 60rpx;
vertical-align: middle;
}
.post-date{
margin-left: 20rpx;
vertical-align: middle;
margin-bottom: 5px;
font-size: 26rpx;
}
.post-title{
font-size: 34rpx;
font-weight: 600;
color: #333;
margin-bottom: 10px;
margin-left: 10px;
}
.post-image{
width: 100%;
height: 340rpx;
margin: auto 0;
margin-bottom: 15px;
}
.post-content{
color: #666;
font-size: 28rpx;
margin-bottom: 20rpx;
margin-left: 20rpx;
letter-spacing: 2rpx;
line-height: 40rpx;
}
.post-like{
font-size: 13px;
flex-direction: row;
line-height: 16px;
margin-left: 10px;
}
.post-like-image{
width: 16px;
height: 16px;
margin-right: 8px;
vertical-align: middle;
}
.post-like-font{
vertical-align: middle;
margin-right: 20px;
}
5****、數(shù)據(jù)綁定
數(shù)據(jù)綁定很重要痢士，那么多的新聞列表怠蹂，不可能每個新聞都復(fù)制粘貼一下代碼。況且小程序還限制在****1MB****大小城侧。
我們把數(shù)據(jù)內(nèi)容單獨放在一個文件夾里，模擬從網(wǎng)絡(luò)加載的情況
如圖豆茫，在根目錄新建一個data文件夾，里面新建一個posts-data.js文件
5.1****幽邓、****posts-data.js
在posts-data.js里定義一個local_database數(shù)組
var local_database=[
{
date:"Nov 10 2016",
title:"文章標題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:"文章標題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:"文章標題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
}
5.2****牵舵、****post.wxml****使用數(shù)據(jù)綁定：
例如用戶頭像圖片的路徑畸颅，用雙大括號括起來 里面和數(shù)組里定義的要相同方援，然后前面要加上item. 意思是綁定數(shù)組里定義的avatar，代碼如下：
5.3****送火、****post.js
先把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
})
},
******6****漾脂、****for****循環(huán)**
在wxml要循環(huán)的部分外面加上標簽
{{item.date}}
{{item.title}}
{{item.content}}
{{item.reading}}
{{item.collection}}
語法是：
wx:for=”{{數(shù)組名}}”
7****胚鸯、源碼下載
http://download.csdn.net/download/acmdown/9930644
