微信小程序 swiper和weiper-itme组件的基本使用，微信小程序轮播图这么做教程

1.swiper组件是干嘛的？

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

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

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

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

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

`

  
    A
  

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

为什么这么嵌套呢？

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

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

  
    A
  
  
    B
  
  
    C
  

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

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

修改后代码为

list.wxml

  
    A
  
  
    B
  
  
    C
  

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

 更多属性进入微信开发小程序swiper使用文档

常用属性我们来测试一下，

indicator-dots 的使用（是否显示面板指示点）

我们把属性写在swiper后面试试效果

通过上图可以看出，添加了indicator-dots属性后指示点出来了

 indicator-color 属性的使用（未选中指示点颜色）

我们尝试把指示点修改颜色

        

 我们可以看得到，左边演示的指示点已经被我们更换成红色了透明70%的颜色

indicator-active-color 属性的使用（当前选中的指示点颜色）

我们看到上图只是修改了未选择的颜色，现在我们来修改一个选中后的颜色

这时我们看图就能发现，颜色已经被我们修改成绿色了

autoplay属性的使用（是否自动切换）

在生活中我们能看到很多轮播图，他都是自动切换的，可是我们上面做了这么多工作发现图片都是固定不动的需要人为去参与滑动，这时就有了autoplay属性让他自动切换，实现我们不动，轮播图自动播放

我们会发现添加这个属性后，每过一段时间会自动播放

interval属性的使用（自动切换时间间隔）

这时有人就会问，我既然自动切换了，哪怎么才能控制时间呢？有的图我要比较慢切换，有的图我要他唰唰的跳过，所以就有了interval属性控制自动切换的时间

我们尝试添加上去看看，时间单位是毫秒

 相当于每过2000毫秒就更换一张图片，更具自己的情况进行修改

circular属性使用（是否采用衔接滑动）

当我们图片达到10张图片的时候，我们滑动到最后一张，但是又想回到第一张发现回不去了，很麻烦需要一直向左滑动，所以就有了衔接滑动，从最后一张到第一张图片，我们没添加只前是这样的。

最后一张想滑动却不给我滑动，这时候添加试试

 添加后发现他可以衔接滑动了，这样增加了用户体验。

到目前位置swiper组件常用属性解释到此结束了，感谢大家阅读，欢迎加入我们一起学习