1.swiper组件是干嘛的？

滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。

2.swiper和swiper-itme怎么使用？

接下来我尝试教大家怎么使用swiper组件去做一个轮播图效果

和之前一样，先设置一个空页面。

我们先写入一个基础代码格式

<swiper>
  <swiper-item>
    <view>A</view>
  </swiper-item>
</swiper>

我们可以看到代码中swiper标签下有一个swiper-itme标签下有一个view标签，

为什么这么嵌套呢？

因为swiper把他比作一个大盒子，swiper-itme 比作一个大盒子中的小盒子如图

正常情况下swiper代表整个块是轮播图，seiper-itme代表每一张图，但是我们写代码的原则是能不能懂他原来的框架就不动，尽然swiper-itme是代表每一张图，我们就在里面写image或这view都可以对吧，所以由此得出上面的格式，但是我上图只显示了一个A，如果我要多张轮播图，是不是要复制多个swiper-itme标签由此可以得出一下代码：

<swiper>
  <swiper-item>
    <view>A</view>
  </swiper-item>
  <swiper-item>
    <view>B</view>
  </swiper-item>
  <swiper-item>
    <view>C</view>
  </swiper-item>
</swiper>

这样我们就能看到左边的示范图他就可以滑动了

这时候为了方便查看我们给代码加一点样式

修改后代码为

list.wxml

<swiper class="siwper-container">
  <swiper-item>
    <view class="itme">A</view>
  </swiper-item>
  <swiper-item>
    <view class="itme">B</view>
  </swiper-item>
  <swiper-item>
    <view class="itme">C</view>
  </swiper-item>
</swiper>

list.wxss

.itme{
  height: 150px;
  background-color: lightskyblue;
  text-align: center;
  line-height: 150px;
}

到这里轮播图基本制作完成了，接下来我们看看可以经常使用的属性

属性	类型	默认值	必填	说明	最低版本
indicator-dots	boolean	false	否	是否显示面板指示点	1.0.0
indicator-color	color	rgba(0, 0, 0, .3)	否	指示点颜色	1.1.0
indicator-active-color	color	#000000	否	当前选中的指示点颜色	1.1.0
autoplay	boolean	false	否	是否自动切换	1.0.0
interval	number	5000	否	自动切换时间间隔	1.0.0
circular	boolean	false	否	是否采用衔接滑动	1.0.0