微信小程序2—swiper-item

最新推荐文章于 2024-07-09 22:53:52 发布

scorpioto

最新推荐文章于 2024-07-09 22:53:52 发布

阅读量580

点赞数

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/scorpioto/article/details/125474914

版权

这篇博客展示了如何在微信小程序中利用.wxml和.wxss文件配置Swiper组件，创建一个带有指示点、自动播放功能的轮播图。内容包括设置轮播图样式、背景颜色以及每个滑块的布局和样式。通过实例代码详细解析了Swiper的用法。

摘要由CSDN通过智能技术生成

.wxml
<swiper class="swiper-container" indicator-dots indicator-color="white" autoplay="true" interval="2000">
<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_container{
  /* width:100px; */
  height:150px;
  /* text-align: center;
  line-height: 100px; */
}

.item{
  height:100%;
  line-height:150px;
  text-align: center;
}
swiper-item:nth-child(1) .item{
  background-color:lightgreen;
}
swiper-item:nth-child(2) .item{
  background-color: azure;
}
swiper-item:nth-child(3) .item{
  background-color: bisque;
}