微信小程序的轮播功能(微信小程序的轮播图)

我们可以在官网看到carousel的解释。下面举例说明微信小程序轮播功能的实现效果:

先看看效果图:

JS代码:

var app = getApp()；page({ data:{ imgUrls:[& # 039；http://img 02 . too open . com/images/2015 09 28/too open _ sy _ 143912755726 . jpg & # 039；, 'http://img 06 . too open . com/images/2016 08 18/too open _ sy _ 175866434296 . jpg & # 039；, 'http://img 06 . too open . com/images/2016 08 18/too open _ sy _ 175833047715 . jpg & # 039；]，indicatorDots: true，autoplay: false，interval: 5000，duration: 1000 }，change indicator dots:function(e){ this . setdata({ indicator dots:！this.data.indicatorDots }) }，change autoplay:function(e){ this . setdata({ autoplay:！this.data.autoplay }) }，interval change:function(e){ this . setdata({ interval:e . detail . value })}，duration change:function(e){ this . setdata({ duration:e . detail . value })})数据是要设置的数据。指示器点是否设置了一点？间隔设置切换的毫秒数，持续时间设置切换的速度。遍历所有照片。这些值通过数据设置，然后在函数中设置。

WXML代码:

& ltswiper指示器-dots = & quot；{ { indicatorDots } } & quot自动播放= & quottrue & quot间隔= & quot5000 & gt；持续时间= & quot1000 & quot& gt& lt块wx:for = & quot；{ { imgUrls } } & quot& gt& ltswiper -item & gt；& ltimage src = & quot{ { item } } & quotclass = & quot幻灯片-图像& quotwidth = & quot400 quot；height = & quot150 & quot/& gt；& lt/swiper -item & gt；& lt/block & gt；& lt/swiper & gt；