我们在官网上可以看到轮播相关的说明了,这里是通过一个实例来说明一下微信小程序的轮播功能的实现效果:
先看一下效果图:

JS代码:
var app = getApp();
Page({
data: {
imgUrls: [
'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
],
indicatorDots: true,
autoplay: false,
interval: 5000,
duration: 1000
},
changeIndicatorDots: function(e) {
this.setData({
indicatorDots: !this.data.indicatorDots
})
},
changeAutoplay: function(e) {
this.setData({
autoplay: !this.data.autoplay
})
},
intervalChange: function(e) {
this.setData({
interval: e.detail.value
})
},
durationChange: function(e) {
this.setData({
duration: e.detail.value
})
},
})data中是要设置的数据。indicatorDots设置是否有点,interval设置每隔多少毫秒进行切换,duration设置切换的速度。中对所有的照片进行遍历。这些值通过data然后在函数中进行设置。
婚纱影楼小程序提供了一个连接用户与影楼的平台,相当于影楼在微信的官网。它能帮助影楼展示拍摄实力,记录访客数据,宣传优惠活动。使用频率高,方便传播,是影楼在微信端宣传营销的得力助手。功能特点:样片页是影楼展示优秀摄影样片提供给用户欣赏并且吸引客户的。套系页是影楼根据市场需求推出的不同套餐,用户可以按照自己的喜好预定套系。个人中心可以查看用户预约的拍摄计划,也可以获取到影楼的联系方式。
WXML代码:
以上就是这个轮播的的过程,主要应用组件,autoplay设置是否自动播放,interval设置每隔多少毫秒进行切换,duration设置切换的速度。中对所有的照片进行遍历。
通过简单的配置可以达到轮播的效果,还是非常容易实现的。
更多微信小程序的轮播功能相关文章请关注PHP中文网!










