swiper组件

最新推荐文章于 2024-09-21 20:57:10 发布

小幸运1112

最新推荐文章于 2024-09-21 20:57:10 发布

阅读量262

点赞数

分类专栏：小程序

本文链接：https://blog.csdn.net/qq_23080805/article/details/104629494

版权

小程序专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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,
    },   
  ]}
})