1.

官方api：https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html

2.

滑块视图容器，这里我们使用这个视图实现轮播图的效果，效果图如下，

3.

1.index.js中：

//index.js//获取应用实例constappgetApp()vardotsFirsttrue;varisCircularFirsttrue;varisVerticalFirsttrue;Page({data:{isCircular:true,//默认衔接滑动interval:3000,//默认自动切换时间间隔duration:1000,//默认滑动动画时长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'],},onLoad:function(){},//显示/隐藏指示器showDots:function(){if(dotsFirsttrue){dotsFirstfalse;this.setData({indicatorDots:true,});}else{dotsFirsttrue;this.setData({indicatorDots:false,});}},//设置，取消衔接滑动showCircular:function(){if(isCircularFirsttrue){isCircularFirstfalse;this.setData({isCircular:true,});}else{isCircularFirsttrue;this.setData({isCircular:false,});}},//设置，取消滑动方向是否为纵向showVertical:function(){if(isVerticalFirsttrue){isVerticalFirstfalse;this.setData({vertical:true,});}else{isVerticalFirsttrue;this.setData({vertical:false,});}},//设置指示器颜色事件icInput:function(e){this.setData({indicatorColor:e.detail.value})},//设置自动切换时间的间隔事件iInput:function(e){this.setData({interval:e.detail.value})},//设置自动切换时间的间隔事件dInput:function(e){this.setData({duration:e.detail.value})},//设置当前选中的指示点颜色事件iacInput:function(e){this.setData({indicatorActiveColor:e.detail.value})},})4.

2.index.wxml中：

swiperindicator-dots"{{indicatorDots}}"indicator-color"{{indicatorColor}}"autoplay'{isAutoplay}'current'0'interval"{{interval}}"duration"{{duration}}"circular"{{isCircular}}"vertical"{{vertical}}"indicator-active-color"{{indicatorActiveColor}}"blockwx:for"{{imgUrls}}"wx:key"imageKey"swiper-itemimagesrc"{{item}}"class"image"//swiper-item/block/swiperbuttonclass'buton'catchtap'showDots'显示/隐藏指示器/buttonbuttonclass'buton'catchtap'showCircular'设置/取消衔接滑动/buttonbuttonclass'buton'catchtap'showVertical'设置/取消滑动方向是否为纵向/buttonviewviewclass'text'设置指示器的颜色(请使用十六进制颜色值,例如：#ff00ff)/viewinputclass"input"placeholder""value"#"bindinput"icInput"confirm-type"done"focus//viewviewviewclass'text'设置自动切换时间间隔(单位毫秒(ms),例如：3000就是3秒)/viewinputclass"input"placeholder""type"number"value"3000"bindinput"iInput"confirm-type"done"focus//viewviewviewclass'text'设置滑动动画时长(单位毫秒(ms),例如：1000就是1秒)/viewinputclass"input"placeholder""type"number"value"1000"bindinput"dInput"confirm-type"done"focus//viewviewviewclass'text'设置当前选中的指示点颜色(请使用十六进制颜色值,例如：#ff00ff)/viewinputclass"input"placeholder""value"#"bindinput"iacInput"confirm-type"done"focus//view5.

3.index.wxss中：

.image{width:100%;}.buton{margin-top:10rpx;}.input{width:100%;padding-left:10rpx;margin-top:10rpx;font-size:35rpx;background-color:#ccc;}.text{font-size:35rpx;margin-top:10rpx;padding-left:10rpx;}6.

4.demo下载地址:

7.

http://download.csdn.net/download/afanbaby/10158552

8.

本人菜鸟一个，有什么不对的地方，希望大家指出评论，大神勿喷，希望大家一起学习进步！