微信小程序轮播图的实现（swiper语法）以及swiper的常用属性汇总

wxml中的代码：

【相当于html】注释有利于你的学习，也可以复制粘贴也可以实现

<!-- 轮播图结构 这里的indicator-dots="true"是是否显示轮播图下面的圈圈-->
<swiper class="swiper-container" indicator-dots="true">
<!-- 第一个轮播图 轮播图里面可以放文字或图片，这里我放文字了-->
<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-item></swiper-item>即可 -->
</swiper>

wxss中的代码：

.swiper-container{
  height: 150px;
}
.item{
  height: 100%;
  line-height: 150px;
  text-align: center;
}
swiper-item:nth-child(1) .item{
  background-color: darkgoldenrod;
}
swiper-item:nth-child(2) .item{
  background-color: chartreuse;
}
swiper-item:nth-child(3) .item{
  background-color:magenta;
}

理论上，上面两个代码复制粘贴就可以实现轮播图的

运行结果：

swiper常用的属性表：【放在swiper标签中的】