swiper和swiper-item的基本用法

效果一：彩色滚动图

index.wxml代码：

<swiper class="swiper-container">

<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>

index.wxss代码：

.swiper-container {
  height: 150px;
}

.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: lightskyblue;
}

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

效果二：滚动图添加下标点

只要修改index.wxml中的第一句

<swiper class="swiper-container" indicator-dots>

修改滚动点颜色

<swiper class="swiper-container" indicator-dots indicator-color="white">

修改选中点颜色

<swiper class="swiper-container" indicator-dots indicator-color="white" indicator-active-color="grey">

启动延时并设计延时时间

<swiper class="swiper-container" indicator-dots indicator-color="white" indicator-active-color="grey" autoplay interval="3000">

总结：

indicator-dots                                            启动滚动点显示

indicator-color="white"                            设置未滚动点颜色

indicator-active-color="grey"                  设置滚动点颜色

autoplay interval="3000"                          启动自动滚动，并设置滚动间隔时间