微信小程序開發閱讀&amp;電影小程序之（3）——新聞列表頁面構建-數據綁定-for循環

2024-04-27 15:08:34

字體：大中小

來源：轉載

供稿：網友

1、效果圖預覽

這里寫圖片描述

2、準備工作

在拿到效果圖后不要先急著去寫代碼，而是要去分析一下頁面的整體結構，用什么方式定位和布局。小程序里建議使用flex布局，因為小程序對flex的支持是很好的。

上一篇博客中完成了輪播圖部分，接下來繼續完成下面的新聞列表部分

3、wxml部分

新聞列表部分整體使用flex縱向布局比較合適，先把頁面內的元素標簽和類名寫好。

<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>

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、數據綁定

數據綁定很重要，那么多的新聞列表，不可能每個新聞都復制粘貼一下代碼。況且小程序還限制在1MB大小。

我們把數據內容單獨放在一個文件夾里，模擬從網絡加載的情況

如圖，在根目錄新建一個data文件夾，里面新建一個posts-data.js文件這里寫圖片描述

5.1、posts-data.js

在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:"文章簡介文章簡介文章簡介文章簡介文章簡介文章簡介文章簡介文章簡介文章簡介文章簡介文章簡介文章簡介", 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使用數據綁定：

例如用戶頭像圖片的路徑，用雙大括號括起來里面和數組里定義的要相同，然后前面要加上item. 意思是綁定數組里定義的avatar，代碼如下：

5.3、post.js

先把posts-data.js文件引入：

var postsData=require('../../data/posts-data.js')

然后在onLoad: 函數內設置Data的值

onLoad:function(options){ // 生命周期函數--監聽頁面加載 this.setData({ posts_key:postsData.postList }) },

6、for循環

在wxml要循環的部分外面加上<block> </block>標簽

<block wx:for="{{posts_key}}" wx:for-item="item"><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></block>

語法是：

wx:for=”{{數組名}}”