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

标签: 编程案例练习  小程序  小程序

先看效果

在这里插入图片描述

代码演示

第一步:

外层使用一个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对象解构!!!
在这里插入图片描述

版权声明:本文为weixin_43352901原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_43352901/article/details/108113162