列表渲染

wxml:

<view class="">
<view class='movie' wx:for="{{weeklyMovieList}}">
    <image class="movie-image" src='{{item.imagePath}}'></image>
   <view class='movie-details'>
     <text>第{{index+1}}周：{{item.name}}</text>
     <text>点评：{{item.comment}}</text>
     <text wx:if="{{item. isHighRecommended}}"style="font-size:16px;color:red;">强烈推荐</text>
   </view>
  </view>
</view>

wxss:

.movie{
  display: flex;
}
.movie-details{
  display: flex;
  flex-direction: column;
  width:550rpx
}
.movie-image{
  width: 200rpx;
  height: 200rpx;
}

js:

Page({
  data:{
    weeklyMovieList:[
      {
      name:"瓶子",
      comment:"最精彩的剧本，最真实的生活电影",
      imagePath:"http://t8.baidu.com/it/u=3571592872,3353494284&fm=79&app=86&f=JPEG?w=1200&h=1290",
      isHighRecommended:true,
    },
    {
      name:"烈火英雄",
      comment:"消防电影",
      imagePath:"//08imgmini.eastday.com/mobile/20200302/20200302205524_62c03498d2bbb0713541cf3830b1905f_1.jpeg",
      isHighRecommended:false,
    },
    {
      name:"这个杀手不太冷",
      comment:"萝莉与怪蜀黍的爱情电影",
      imagePath:"//03imgmini.eastday.com/mobile/20200302/2020030210_515c1c03216d48d49c2d4c25c6a780af_8115_wmk.jpg",
      isHighRecommended:false,
    },   
  ]}
})