微信小程序2——swiper和swiper-item组件的基本使用

FCCheng

已于 2024-07-19 19:38:46 修改

阅读量307

点赞数 6

文章标签：微信小程序小程序学习 java

于 2024-07-02 22:29:44 首次发布

本文链接：https://blog.csdn.net/FCCheng/article/details/140137953

版权

使用swiper和swiper-item能够实现轮播图效果
首先在list-wxml文件中加入以下代码：

<!--轮播图区域-->
<!--indicator-dots 属性：显示面板指示点-->
<swiper class="swiper-container" indicator-dots>
<!--第一项-->
<swiper-item>
<view class="item">A</view>
</swiper-item>
<!--第二项-->
<swiper-item>
<view class="item">B</view>
</swiper-item>
<!--第三项-->
  <swiper-item>
  <view class="item">C</view>
  </swiper-item>
</swiper>

其次在list-wxss文件中加入以下代码：

.swiper-container{
  height: 150px; /*轮播容器的高度 */
}
.item {
  height: 100%;
  line-height: 150px;
  text-align: center;
}
swiper-item:nth-child(1) .item{
  background-color: lightblue;
}
swiper-item:nth-child(2) .item{
  background-color: lightgreen;
}
swiper-item:nth-child(3) .item{
  background-color: lightsalmon;
}