微信小程序学习——wx.for的使用

wx.for的使用

目标是，可以自动获取data中的结构，然后进行ui的排列。

在wxml中使用block标签。

......
	 <view class='doSm'>
          <block wx:for="{{TotelMsg}}">
              <text class="nameCls">{{item.username}}</text>
              <text class="msgCls">{{item.str}}</text>
          </block>
       </view>
......

附：class也可以做成object中包含的属性。

在data中使用Array结构，内包含object，这样的结构。

data: {
	......,
    TotelMsg: [
      {
      "username" : "aaa",
      "str": "This message is about a.",
      },
      {
        "username": "bbbb",
        "str": "This message is about b.",
      },
      {
        "username": "cccc",
        "str": "This message is about c.",
      },
      {
        "username": "ddd",
        "str": "This message is about d.",
      },
    ],
	......
  },

这样就能动态的加载这些数据。
注：所有的data最好都用 “key” : “value” 带双引号的方法编写，这样更接近与JSON字符串。

剩下就是wcss布局的问题。。。。。。。。。