微信小程序 列表渲染 wx:for

wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

wx:for-item指定数组当前元素，或当前项的变量名
wx:for-index 指定数组当前下标的变量名

<view wx:for="{{array}}">
    {{index}}:{{item.message}}
</view>

data:{
     array:[{message:'foo'},{message:'bar'}]
}

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}:{{itemName.message}}

</view>

 

<block wx:for="{{stars}}" wx:for-item="i">
     <image wx:if="{{i}}" src="/images/icon/star.png"></image>
     <image wx:else src="/images/icon/none-star.png"></image>
</block>

function convertToStarsArray(stars) {
  var num = stars.toString().substring(0, 1);
  var array = [];
  for (var i = 1; i <= 5; i++) {
    if (i <= num) {
      array.push(1);
    }
    else {
      array.push(0);
    }
  }
  return array;
}