swiper组件

wxml:

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

wxss:

.movie{
  display: flex;
}
.movie-details{
  display: flex;
  flex-direction: column;
  width:550rpx
}
.movie-image{
  width: 200rpx;
  height: 200rpx;
}
.movie-swiper{
  height:90vh;
}
.movie-card{
  height:100%;
  width: 100%;
}

JS:

Page({
  data:{
    weeklyMovieList:[
      {
      name:"红楼梦",
      comment:"曹雪芹经典小说",
      imagePath:"//06imgmini.eastday.com/mobile/20200302/20200302170141_d90989764d85547968d15a03248cb89e_1.jpeg",
      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,
    },   
  ]}
})