在购物网站上看到轮播图里面是热门商品的信息，在小程序里用 swiper 滑动视图容器组件来实现。
swiper 滑动视图容器组件的属性：
1.indicator-dots：滑动容器面板组件在面板上加一些指示点，指示点就代表当前容器内的滑块它在容器内的位置，是否显示面板是用indicator-dots 属性来控制的的；
2.indicator-color：它的指示点的颜色以及当前活动元素，也就是当前显示元素指示点的颜色；
3.autoplay：想做一个自动播放轮播图的功能可以用 autoplay属性 来设置；
4.interval:滑块自动播就可以通过 interval属性 来设置播放的间隔；
5.duration：通过 duration属性 设置滑块在滑动时候的动画时长；
6.current：代表了当前滑块所在容器里面的index下标；
7.current-item-id：表示了当前元素自身的一个item-id、item-id代表它元素的唯一性：
8.circular：表示了滑块在滑动的时候是否有衔接的过都方式；
9.vertical：设置滑块滑动的方向上是横向还是纵向；
10.previous-margin 和 next-margin：通过设置来漏出滑块在前一项的边距值以及，它距下一项的边距达到预览的效果；
11.display-multiple-items：设置同时显示滑块数量，滑块数量是不能超过子元素的数量；
12.skip-hidden-item-layout：如果容器内具有多个滑块，不让一些滑块显示的时候 skip-hidden-item-layout属性 来跳过没有显示的滑块布局；
13.bindchange：通过 bind属性 来绑定事件，比如change事件，当前元素改变时会触发change事件；
14.bindanimationfinish：bindanimationfinish事件当前滑块在播放滑动之后，它的一个回调事件、回调事件本意是动画结束时会触发；
swiper 容器组件内只能定义 swiper-item 组件，swiper-item 组件表示了容器的子元素的滑块；
通过实体来看 swiper和 swiper-item之间如何使用：
定义了swiper组件容器，swiper组件容器里面绑定了一些属性：
1、indicator-dots：通过indicator-dots的变量来绑定，是否显示指示点；
2、autoplay：通过autoplay的变量来绑定，是否自动播放；
3、interval：通过interval的变量来绑定，来设置播放的间隔；
4、current：属性是从0开始的，设置是1表示当前要展示滑块，它在容器内是第二个；
5、duration：通过duration的变量来绑定，它动画播放时长；
6、绑定了两个事件分别是：change和animationfinish事件。
7、在swiper容器内通过for循环把定义的子元素的数组循环展现出来；
8、在swiper容器内通过for循环把定义的子元素的数组循环渲染出来；
9、通过wx:for属性：绑定一个backgroud的变量。
在js文件设置了data对象，backgroundz里设置了字符串的数组，包含：demo-text-1、demo-text-2、demo-text-3
在wx:for列表渲染里面使用到了wx:key这个属性，*this表示当前元素和item类示、但是*this使用只能是 字符串或 数字的元素数组。
<swiper
indicator-dots="{{indicatorDost}}"
autoplay="{{autoplay}}"
interval="{{interval}}"
current="1"
duration="{{duration}}"
bindchange="change"
bindanimationfinish="animationfinish"
>
<block wx:for="{{background}}" wx:key="*this">
<swiper-item>
<view class="swiper-item {{item}}">
</swiper-item>
</block>
</swiper>
11、在小程序界面的swiper下面定义了两个按钮以及两个滑动条，这两个按钮以及两个滑动条通过切换开关、以及滑动条的范围，来设置swiper组件容器内元素表现；
运行实例：如图
通过swiper.wxss样式为属性来设置的，demo-text-1 是数组元素的第一项，通过 before为属性在它的内前面插入'A'字符；如图：
demo-text-2 是通过通过 before为属性在它的内前面插入'B'字符；如图：
demo-text-3 是通过通过 before为属性在它的内前面插入'C'字符；如图：
在swiper有三个滑块分别是：滑块A,滑块B,滑块C；
swiper.wxml文件中小程序渲染出来，的滑块当前元素是滑块B；
通过 current属性设置的“1”的效果，如果去掉current="1"这个属性，渲染出来就是第一项，如图：
autoplay是绑定 autoplay变量，在swiper.js文件中初始化默认autoplay是false是禁用自动播放的功能；
在swiper组件内 interval属性 初始化2000毫秒的播放间隔；
duration属性 初始化300毫秒的的动画播放时长；
vertical属性 默认进入纵向播放；
indicatorDots属性 默认显示指示点；如图：
指示点后面跟着一个开关，通过checked属性绑定一个变量以及绑定一个changes事件！
<view class="weui-cell_bd">指示点</view>
<view class="weui-cell_ft">
<switch checked="{{indicatorDost}}" bindchange="changeIndicatorDots" />如图：
当开启自动播放的开关后，滑块就会根据定义的播放间隔以及动画时长来进行播放，触发了change以及animatonfinish 这两个事件：如图：
current:当前元素的下标；
source:触发这个动作的方式。这里是用autoplay自动播放来触发的；
currentItemId:没有给swiper-item 定义itemId，所以这里是一个空字符串；如图：
animatonfinish事件所携带的信息：1.detail属性携带的信息和change基本一样，如图：
通过设置切换幻灯片时长来控制元素在，切换时动画的时长；如图：
设置自动播放的间隔时长，设置为5296毫秒，如图：
