moive.wxml文件
```
< view class = "movie"wx: for = "{{list}}"wx: key = "{{index}}" > <image class = "movie-img"src = "{{item.image}}" > </image>
<view class="movie-info">
<view class="movie-title">{{item.name}}</view > <view > 观众评分: < text class = "movie-score" > {
{
item.score
}
}分 < /text>
</view > <view > 主演: < text > {
{
item.leader
}
} < /text>
</view > <view > 年份: {
{
item.year
}
} < /view>
</view > <button bindtap = "gotoComment"data - movieid = "{{item.id}}"class = "movie-comment" > 评价 < /button>
</view >
```
moive.wxss文件
```
/* pages/movie/movie.wxss */
.movie {
display: flex;
padding: 10px;
border - bottom: 1px solid#ccc;
}
.movie - img {
width: 200rpx;
height: 300rpx;
margin - right: 20rpx;
}
.movie - info {
flex: 1;
font - size: 28rpx;
line - height: 1.8;
}
.movie - title {
color: #666;
font - size: 40rpx;
font - weight: bolder;
}
.movie - score {
color: #faaf00;
}
.movie - comment {
height: 60rpx;
background: #E54847;
color: #fff;
font - size: 26rpx;
margin - top: 120rpx;
}
```
结果:
![](https://box.kancloud.cn/954d40df2696ed5ca5ecb706ec5957f3_791x777.png)