微信小程序轮播图

最新推荐文章于 2024-07-07 22:37:27 发布

yinke2022

最新推荐文章于 2024-07-07 22:37:27 发布

阅读量302

点赞数 1

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

本文链接：https://blog.csdn.net/yinke2022/article/details/123199469

版权

微信专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.编写以下代码（.wxml）

<!-- 轮播图结构 -->
<swiper class="swiper-contener" autoplay indicator-dots indicator-color="black" indicator-active-color="red">
  <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-contener{
   height: 150px;
 }
 .item{
   height: 100px;
   line-height:150px;
   text-align: center;
 }
swiper-item:nth-child(1) .item{
  height: 100%;
  background-color: lightcoral;
}
swiper-item:nth-child(2) .item{
  height: 100%;
  background-color: rgb(173, 38, 78);
}
swiper-item:nth-child(3) .item{
  height: 100%;
  background-color: rgb(30, 207, 89);
}