微信小程序 swiper轮播窗口使用

最新推荐文章于 2024-04-04 11:22:46 发布

chen_y09

最新推荐文章于 2024-04-04 11:22:46 发布

阅读量170

点赞数

分类专栏：微信小程序文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/chen_y09/article/details/131703949

版权

微信小程序专栏收录该内容

4 篇文章 0 订阅

订阅专栏

WXML文件

<!--pages/list/list.wxml-->
<swiper class="swiper-container" indicator-dots indicator-color="white" indicator-active-color="gray" autoplay
inteval="2000" circular>
  <!--第一个轮播图-->
  <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>

WXSS文件

swiper-item:nth-child(1) .item{
  background-color: lightgreen;
}
swiper-item:nth-child(2) .item{
  background-color: lightskyblue;
}
swiper-item:nth-child(3) .item{
  background-color: lightpink;
}