微信小程序广告转盘地图制作

几乎每个小程序都使用广告转盘图，因此有必要解释旧规则。首先，看效果图。事实上，我相信大家都知道，这是为了熟悉基本小部件刷卡器的属性

翻译gif图片

开关属性简介

属性名称

效应

参数值

指示点

是否显示面板指示点

True/false默认为false

指示器颜色

指示器颜色

默认值rgba（0、0、0和.3）

指示器活动颜色

当前选定指示器点的颜色

默认颜色#000000

自动播放

是否自动切换

True/false默认为false

间隔

自动切换间隔

数字默认为5000

期间

滑动动画持续时间

数字默认为500

竖的

滑动方向是否为纵向

True/false默认为false

绑定更改

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

广告转盘效果的实现

1、 wxml接口的实现

滑动器

滑动进度条控制随时间滚动

<；/视图>

<刷卡项目>

该界面易于实现，并且可以通过使用小部件包裹的滑动来轻松实现。为了比较效果，我生成了两个广告转盘，一个是水平滚动，另一个是垂直滚动

2、 xxx的控制。js属性

第页({

数据：{

//横幅

imgUrls：[

' https://7xnmrr.com1.z0.glb.clouddn.com/red.png ',

' https://7xnmrr.com1.z0.glb.clouddn.com/yellow.png ',

' https://7xnmrr.com1.z0.glb.clouddn.com/green.png '

],

IndicatorDots:true，//是否显示面板指示点

autoplay:true，//是否自动切换

间隔：3000，//自动切换间隔，3s

持续时间：1000，//滑动动画持续时间：1s

},

durationChange:函数（e）

{

this.set数据({

持续时间：e.detail.value

})

},

我已经在代码中用js注释了属性。如果要更改属性，只需直接修改相应的值即可。durationChange用于控制滑动动画的持续时间。您可以使用滑动进度条

3、 Wxss样式

*直接设置开关属性*/

刷子{

高度：400rpx；

}

刷卡商品图像{

宽度：100%；

高度：100%；

}

不要低估这些代码行。用于将转盘地图从全屏设置为全屏的代码。设置成功花了很长时间。通常，当您使用它时，只需复制上面的代码即可。最多可以设置刷子的高度

总结

今天是星期五，所以没有什么解释。我相信你会看一看，你可能会学到更多。最后，祝你周末愉快~

推荐文章：