微信小程序——for循环写出列表 简单例子

 

<block wx:for="{{post_key}}" wx:for-item="item">

<view class='post-container'>

<view class='post-author'>

<image class='post-img' src='/image/human.png'></image>

<text class='post-date'>{{item.date}}</text>

</view>

<text class='post-title'>{{item.title}}</text>

<image class='post-image' src='/image/sf10.jpg'></image>

<text class='post-contain'>hfkjhjkh </text>

<view class='post-like'>

<image class='post-like-image' src='../../image/id.png'></image>

<text class='post-like-font'>92</text>

<image class='post-like-image' src='../../image/pass.jpg'></image>

<text class='post-like-font'>65</text>

</view>

</view>

</block>

 

onLoad: function (options) {

var post=[

{

date:"Sep 18 2016",

title:"周杰伦"

},

{

date:"Nov 20 2018",

title:"TANGjy149"

}

]

this.setData({

post_key:post

});//等同于把页面加载请求的数据加载到了data中

},

 

 

Wx:for循环如果只想取前几个，通过wx：for-index和wx：if来操作

<block wx:for="{{movies}}" wx:for-item="movie" wx:for-index="id" >

<block wx:if="{{id<3}}">

<template is="movieTemplate" data="{{...movie}}" />

</block>

</block>