微信小程序的轮播功能

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

先看一下效果图： 

JS代码：

var app = getApp();
Page({
 data: {
 imgUrls: [
 #39;http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg #39;,
 #39;http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg #39;,
 #39;http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg #39;
 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代码：

 swiper indicator-dots= {{indicatorDots}} 
 autoplay= true interval= 5000 duration= 1000 
 block wx:for= {{imgUrls}} 
 swiper-item 
 image src= {{item}} >
以上就是这个轮播的的过程，主要应用组件，autoplay设置是否自动播放，interval设置每隔多少毫秒进行切换，duration设置切换的速度。中对所有的照片进行遍历。

通过简单的配置可以达到轮播的效果，还是非常容易实现的。
更多微信小程序的轮播功能相关文章请关注PHP中文网！
 
  
 微信app下载
 
微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！