小程序开发基础-雨刮器滑块视图容器

标题地图

小编/达小生叔叔

参考官方文件：

小程序开发基础-滑动器视图容器

根据官方文档，在自己的程序上运行并键入代码呈现。滑动器视图容器用于显示和控制图片

设计草图

滑动器是一个滑块视图容器，这实际上是旋转图的效果。

代码中指示器点=“｛｛indicatorDots｝｝”的效果用于显示指示器点，即图片底部的小圆。

自动播放=“｛｛Autoplay｝｝”表示是否可以自动切换效果。如果未设置，界面中将只显示一张图片。

Current=“0”指的是当前显示的滑块以及为什么它为0。因为默认值为0，所以可以从零开始判断。

Interval=“｛｛Interval｝｝”是自动切换时间的间隔，这意味着当图片在设置时显示时，每个图片将开始切换到下一个视图，即图片。如果设置为3000，即3秒，则图片将显示3秒，然后再移动到下一张图片。

持续时间=“｛｛Duration｝｝”是滑动动画的持续时间。你怎么理解？这是从第一张图片切换到第二张图片的时间。也就是说，滑出第一张图片并滑入第二张图片只需要很长时间。

圆形=“｛｛圆形｝｝”表示是否采用内聚滑动。你怎么理解？参加如果未设置此属性，则如果转盘图片是三张图片，则第一张图片将显示到第三张图片中，然后将显示最后一张图片。它将返回到第一张图片，效果看起来不太好。如果此属性设置为true，则可以在演示后直接进入第一张图的界面。

//用于显示转盘地图的效果

<刷卡项目>

//用于定义是否显示面板指示点

指示器点

//用于定义是否自动切换

自动播放

//幻灯片进度。此按钮效果用于更改自动切换间隔

间隔

//滑动进度。此按钮效果用于更改滑动动画持续时间

持续时间

雨刮器的特性

属性

解释

指示点

显示面板的指示点，图片下方的小圆

指示器颜色

指示点颜色

指示器活动颜色

指示当前选定指示器点的颜色

自动播放

指示是否自动切换

现在的

指示当前滑块索引

当前项目id

当前滑块的项目id不能与当前滑块同时指定

间隔

指示自动切换时间间隔

期间

表示为滑动动画持续时间

圆形的

指示是否采用关节滑动

以前的保证金

表示前边距，用于显示前一项的一小部分。接受px和rpx值意味着暴露整个模板中前一项的一小部分

下一页边距

表示后边距，同上

显示多个项目

它表示显示的滑块数量，即界面上显示的图片数量。默认值为1。如果找到2，则在界面上设置两张图片，界面被一分为二

跳过隐藏项布局

指示是否跳过未显示的滑块的布局。将其设置为true可以优化复杂情况下的滑动性能，但隐藏滑块的布局信息将丢失

绑定更改

当当前更改详细信息=｛current:current，source:source｝时，将触发更改事件event

绑定动画配置完成

动画结束时将触发animationfinish事件event。详细信息如上所述

//索引.js

第页({

数据：{

imgUrls：[

' https://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg ',

' https://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg ',

' https://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg '

],

indicatorDots：真，

圆形：真，

自动播放：真，

间隔：2000，

持续时间：1000

},

changeIndicatorDots:函数（e）{

this.set数据({

指示器点：！此数据指示器点

})

},

更改自动播放：函数（e）{

第