微信小程序 列表渲染 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;
}