小程序：列表渲染

功能

实现列表渲染，也就是循环渲染一组数据。

知识点

block

相当于括号

JS代码

posts.js:

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
      console.log("onload")
      var content = [{
          title: "2020LPL夏季赛季后赛观赛指南",
          content: "8月9号，LPL常规赛收官之战结束,在事关季后赛轮次的比赛中关键对局中，SN战胜了FPX，为本赛季常规赛画上句号。进入季后赛的战队依次为,TES、JDG、IG.SN、v5、LGD、wE、FPX",
          imgSrc: " /images/lpl.png",
          dataNum:{
              reading:103,
              collection:93,
          },
          reading: 102,
          detail: "8月9号，LPL常规赛收官之战结束,在事关季后赛轮次的比赛中关键对局中，SN战胜了FPX，为本赛季常规赛画上句号。进入季后赛的战队依次为,TES、JDG、IG.SN、v5、LGD、wE、FPX",
          collection: 92,
          dateTime: "24小时前",
          headImgSrc: "/images/lpl.png",
          author:"猫是猫的猫",
          date: "Nov 202020",
          avatar: "/images/avatar/5.png",
          posttd: 3,
      },{
        title: "2020LPL夏季赛季后赛观赛指南",
        content: "8月9号，LPL常规赛收官之战结束,在事关季后赛轮次的比赛中关键对局中，SN战胜了FPX，为本赛季常规赛画上句号。进入季后赛的战队依次为,TES、JDG、IG.SN、v5、LGD、wE、FPX",
        imgSrc: " /images/lpl.png",
        dataNum:{
            reading:103,
            collection:93,
        },
        reading: 102,
        detail: "8月9号，LPL常规赛收官之战结束,在事关季后赛轮次的比赛中关键对局中，SN战胜了FPX，为本赛季常规赛画上句号。进入季后赛的战队依次为,TES、JDG、IG.SN、v5、LGD、wE、FPX",
        collection: 92,
        dateTime: "24小时前",
        headImgSrc: "/images/lpl.png",
        author:"猫是猫的猫",
        date: "Nov 202020",
        avatar: "/images/avatar/5.png",
        posttd: 3,
    }]
      this.setData({
          posts:content
      })
    //   console.log(content.dataNum.collection,content.dataNum.reading)

  },

posts:content 重新定义一个JS对象

setData里的只能是一个JS对象

ES6写法

onLoad: function (options) {
      console.log("onload")
      
      console.log(postList)
      this.setData({
          postList
      })
    //   console.log(content.dataNum.collection,content.dataNum.reading)

  },

WXML代码

posts.wxml:

<block wx:for="{{posts}}" wx:for-item="item">
            <view class="post-container">
                <view class="post-author-date">
                    <image wx:if="{{flag}}"class="post-author" src="{{item.avatar}}"></image>
                    <text wx:else 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=" /images/icon/chat.png"></image> -->
                    <l-icon name="favor" size="32" color="#666" class="post-like-image" />
                    <text class="post-like-font">{{item.collection}}</text> 
                    <l-icon name="eye" size="32" color="#666" class="post-like-image" />
                    <!-- <image  class="post-like-image" src=" /images/icon/view.png"></image> -->
                    <text class="post-like-font">{{item.reading}}</text> 
                </view>
            </view>
    </block>

列表渲染的wxkey赋值规则

使用wx:for 时最好搭配wx:key,

否则会出现下列警告：

Key 可以是主键，也可以是序号index

<block wx:for="{{postList}}"  wx:for-item="item" wx:key="index">
</block>

<block wx:for="{{postList}}"  wx:for-item="item" wx:key="postid">
</block>