微信小程序開發-新聞列表之新聞列表綁定
微信小程序開(kai)發(fa)-新(xin)聞(wen)列表之新(xin)聞(wen)列表綁(bang)定開發(fa)教(jiao)程：
1、效果圖預覽
2、準備工作
在拿(na)到效果圖(tu)后不要先急著(zhu)去寫代(dai)碼，而是要去分析一(yi)下頁面(mian)的整體結構，用什么方式定位(wei)和布局(ju)。小程(cheng)序(xu)里(li)建(jian)議使用flex布局，因為(wei)小(xiao)程序對flex的支持(chi)是很好的。
上一(yi)篇博客(ke)中完成了輪播(bo)圖部分，接下來(lai)繼(ji)續完成下面的(de)新聞(wen)列表部分
3、wxml部分
新聞列表部分整體使用(yong)flex縱向布局(ju)比較合適，先把頁面(mian)內的元素標簽(qian)和類名寫好。
|
{{item.date}} {{item.title}} {{item.content}} {{item.reading}} {{item.collection}} |
4、wxss部(bu)分
|
.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、數據綁(bang)定
數據綁定(ding)很重要，那么(me)多的新聞列表(biao)，不可(ke)能每個新聞都復制粘貼(tie)一下代碼。況且小程序還限制在(zai)1MB大小。
我(wo)們(men)把數據(ju)內容(rong)單獨放在一個文件夾里，模擬從網(wang)絡加(jia)載的情(qing)況
如圖，在根目錄新建一(yi)個data文件夾，里面新建一個posts-data.js文件
5.1、posts-data.js
在(zai)posts-data.js里定義一個local_database數組
|
var local_database=[ { date:"Nov 10 2016", title:"文章標題1", imgSrc:"/images/post/crab.png", avatar:"/images/avatar/1.png", content:"文(wen)(wen)章(zhang)(zhang)(zhang)簡(jian)(jian)(jian)(jian)介(jie)(jie)(jie)(jie)(jie)文(wen)(wen)章(zhang)(zhang)(zhang)簡(jian)(jian)(jian)(jian)介(jie)(jie)(jie)(jie)(jie)文(wen)(wen)章(zhang)(zhang)(zhang)簡(jian)(jian)(jian)(jian)介(jie)(jie)(jie)(jie)(jie)文(wen)(wen)章(zhang)(zhang)(zhang)簡(jian)(jian)(jian)(jian)介(jie)(jie)(jie)(jie)(jie)文(wen)(wen)章(zhang)(zhang)(zhang)簡(jian)(jian)(jian)(jian)介(jie)(jie)(jie)(jie)(jie)文(wen)(wen)章(zhang)(zhang)(zhang)簡(jian)(jian)(jian)(jian)介(jie)(jie)(jie)(jie)(jie)文(wen)(wen)章(zhang)(zhang)(zhang)簡(jian)(jian)(jian)(jian)介(jie)(jie)(jie)(jie)(jie)文(wen)(wen)章(zhang)(zhang)(zhang)簡(jian)(jian)(jian)(jian)介(jie)(jie)(jie)(jie)(jie)文(wen)(wen)章(zhang)(zhang)(zhang)簡(jian)(jian)(jian)(jian)介(jie)(jie)(jie)(jie)(jie)文(wen)(wen)章(zhang)(zhang)(zhang)簡(jian)(jian)(jian)(jian)介(jie)(jie)(jie)(jie)(jie)文(wen)(wen)章(zhang)(zhang)(zhang)簡(jian)(jian)(jian)(jian)介(jie)(jie)(jie)(jie)(jie)文(wen)(wen)章(zhang)(zhang)(zhang)簡(jian)(jian)(jian)(jian)介(jie)(jie)(jie)(jie)(jie)", reading:"92", collection:"65", view_img:"/images/icon/chat.png", collect_img:"/images/icon/view.png", }, { date:"Nov 20 2016", title:"文(wen)章標題2", imgSrc:"/images/post/bl.png", avatar:"/images/avatar/2.png", content:"文(wen)(wen)(wen)章(zhang)簡(jian)(jian)(jian)介(jie)(jie)(jie)(jie)文(wen)(wen)(wen)章(zhang)簡(jian)(jian)(jian)介(jie)(jie)(jie)(jie)文(wen)(wen)(wen)章(zhang)簡(jian)(jian)(jian)介(jie)(jie)(jie)(jie)文(wen)(wen)(wen)章(zhang)簡(jian)(jian)(jian)介(jie)(jie)(jie)(jie)文(wen)(wen)(wen)章(zhang)簡(jian)(jian)(jian)介(jie)(jie)(jie)(jie)文(wen)(wen)(wen)章(zhang)簡(jian)(jian)(jian)介(jie)(jie)(jie)(jie)文(wen)(wen)(wen)章(zhang)簡(jian)(jian)(jian)介(jie)(jie)(jie)(jie)文(wen)(wen)(wen)章(zhang)簡(jian)(jian)(jian)介(jie)(jie)(jie)(jie)文(wen)(wen)(wen)章(zhang)簡(jian)(jian)(jian)介(jie)(jie)(jie)(jie)文(wen)(wen)(wen)章(zhang)簡(jian)(jian)(jian)介(jie)(jie)(jie)(jie)文(wen)(wen)(wen)章(zhang)簡(jian)(jian)(jian)介(jie)(jie)(jie)(jie)文(wen)(wen)(wen)章(zhang)簡(jian)(jian)(jian)介(jie)(jie)(jie)(jie)", 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:"文(wen)(wen)(wen)(wen)章(zhang)(zhang)(zhang)(zhang)簡(jian)(jian)(jian)(jian)(jian)介文(wen)(wen)(wen)(wen)章(zhang)(zhang)(zhang)(zhang)簡(jian)(jian)(jian)(jian)(jian)介文(wen)(wen)(wen)(wen)章(zhang)(zhang)(zhang)(zhang)簡(jian)(jian)(jian)(jian)(jian)介文(wen)(wen)(wen)(wen)章(zhang)(zhang)(zhang)(zhang)簡(jian)(jian)(jian)(jian)(jian)介文(wen)(wen)(wen)(wen)章(zhang)(zhang)(zhang)(zhang)簡(jian)(jian)(jian)(jian)(jian)介文(wen)(wen)(wen)(wen)章(zhang)(zhang)(zhang)(zhang)簡(jian)(jian)(jian)(jian)(jian)介文(wen)(wen)(wen)(wen)章(zhang)(zhang)(zhang)(zhang)簡(jian)(jian)(jian)(jian)(jian)介文(wen)(wen)(wen)(wen)章(zhang)(zhang)(zhang)(zhang)簡(jian)(jian)(jian)(jian)(jian)介文(wen)(wen)(wen)(wen)章(zhang)(zhang)(zhang)(zhang)簡(jian)(jian)(jian)(jian)(jian)介文(wen)(wen)(wen)(wen)章(zhang)(zhang)(zhang)(zhang)簡(jian)(jian)(jian)(jian)(jian)介文(wen)(wen)(wen)(wen)章(zhang)(zhang)(zhang)(zhang)簡(jian)(jian)(jian)(jian)(jian)介文(wen)(wen)(wen)(wen)章(zhang)(zhang)(zhang)(zhang)簡(jian)(jian)(jian)(jian)(jian)介", reading:"123", collection:"55", view_img:"/images/icon/chat.png", collect_img:"/images/icon/view.png", } ] |
別(bie)忘了在(zai)posts-data.js文件最后加上輸出
|
module.exports={ postList:local_database } |
5.2、post.wxml使用數據綁定：
例(li)如(ru)用戶頭像圖片(pian)的路(lu)徑，用雙大括號(hao)括起來(lai)里(li)面和(he)數組(zu)里(li)定義的要(yao)相同，然(ran)后前面要(yao)加上item.意(yi)思是(shi)綁定數組里定義的avatar，代碼(ma)如下：
5.3、post.js
先把posts-data.js文件(jian)引入：
| var postsData=require('../../data/posts-data.js') |
然后在(zai):函數(shu)內設置Data的值
|
:function(options){ //生命周期(qi)函數--監(jian)聽(ting)頁面加載(zai) this.setData({ posts_key:postsData.postList }) }, |
6、for循(xun)環
在(zai)wxml要循環的部分外面(mian)加上標簽
|
{{item.date}} {{item.title}} {{item.content}} {{item.reading}} {{item.collection}} |
語法是：
wx:for=”{{數組名}}”
7、源碼下載
CSDN
//download.csdn.net/download/acmdown/9930644
