微信小程序開發(fā)-新聞列表之新聞列表綁定
微信小程序開發(fā)-新聞列表之新聞列表綁定開發(fā)教程：
1、效果圖預(yù)覽
2、準(zhǔn)備工作
在拿到效果圖后不要先急著去寫代碼，而是要去分析一下頁(yè)面的整體結(jié)構(gòu)，用什么方式定位和布局。小程序里建議使用flex布局，因?yàn)樾〕绦驅(qū)?/span>flex的支持是很好的。
上一篇博客中完成了輪播圖部分，接下來繼續(xù)完成下面的新聞列表部分
3、wxml部分
新聞列表部分整體使用flex縱向布局比較合適，先把頁(yè)面內(nèi)的元素標(biāo)簽和類名寫好。
|
{{item.date}} {{item.title}} {{item.content}} {{item.reading}} {{item.collection}} |
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ù)綁定很重要，那么多的新聞列表，不可能每個(gè)新聞都復(fù)制粘貼一下代碼。況且小程序還限制在1MB大小。
我們把數(shù)據(jù)內(nèi)容單獨(dú)放在一個(gè)文件夾里，模擬從網(wǎng)絡(luò)加載的情況
如圖，在根目錄新建一個(gè)data文件夾，里面新建一個(gè)posts-data.js文件
5.1、posts-data.js
在posts-data.js里定義一個(gè)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:"文章簡(jiǎn)介文章簡(jiǎn)介文章簡(jiǎn)介文章簡(jiǎn)介文章簡(jiǎn)介文章簡(jiǎn)介文章簡(jiǎn)介文章簡(jiǎn)介文章簡(jiǎn)介文章簡(jiǎn)介文章簡(jiǎn)介文章簡(jiǎn)介", 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:"文章簡(jiǎn)介文章簡(jiǎn)介文章簡(jiǎn)介文章簡(jiǎn)介文章簡(jiǎn)介文章簡(jiǎn)介文章簡(jiǎn)介文章簡(jiǎn)介文章簡(jiǎn)介文章簡(jiǎn)介文章簡(jiǎn)介文章簡(jiǎn)介", 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:"文章簡(jiǎn)介文章簡(jiǎn)介文章簡(jiǎn)介文章簡(jiǎn)介文章簡(jiǎn)介文章簡(jiǎn)介文章簡(jiǎn)介文章簡(jiǎn)介文章簡(jiǎn)介文章簡(jiǎn)介文章簡(jiǎn)介文章簡(jiǎn)介", 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ù)綁定：
例如用戶頭像圖片的路徑，用雙大括號(hào)括起來里面和數(shù)組里定義的要相同，然后前面要加上item.意思是綁定數(shù)組里定義的avatar，代碼如下：
5.3、post.js
先把posts-data.js文件引入：
| var postsData=require('../../data/posts-data.js') |
然后在:函數(shù)內(nèi)設(shè)置Data的值
|
:function(options){ //生命周期函數(shù)--監(jiān)聽頁(yè)面加載 this.setData({ posts_key:postsData.postList }) }, |
6、for循環(huán)
在wxml要循環(huán)的部分外面加上標(biāo)簽
|
{{item.date}} {{item.title}} {{item.content}} {{item.reading}} {{item.collection}} |
語(yǔ)法是：
wx:for=”{{數(shù)組名}}”
7、源碼下載
CSDN
http://download.csdn.net/download/acmdown/9930644
