【小程序】列表渲染 案例练习

先看效果

代码演示

第一步：

外层使用一个block包裹

<block wx:for="{{post_key}}" wx:for-item="item" wx:for-index="idx">
<text>{{idx}}</text>
  <view class="post-container">
    <view class="post-author-date">
          <image src="{{item.author_img}}" class="post-author"></image>
          <text class="post-date">{{item.date}}</text>
    </view>
    <text class="post-title">{{item.title}}</text>
    <image src="{{item.post_img}}" class="post-image"></image>
    <text class="post-content">{{item.content}}</text>
    <view class="post-like">
          <image src="../../images/icon/chat.png" class="post-like-image"></image>
          <text class="post-like-font">{{item.collect_num}}</text>
          <image class="post-like-image" src="../../images/icon/view.png"></image>
          <text class="post-like-font">{{item.view_num}}</text>
    </view>
  </view>
</block>

第二步：
注意：this.setData({}),数组时是需要包裹一个对象，可以用ES6对象解构！！！

---

block wx:for

类似 block wx:if，也可以将 wx:for 用在<block/>标签上，以渲染一个包含多节点的结构块。例如：

<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>