微信小程序 swiper组件轮播图详解及实例

<!--index.wxml-->  
  <swiper class="swiper" indicator-dots="true" aulay="true" interval="5000" duration="1000">  
   <block wx:for="{{movies}}" wx:for-index="index">  
    <swiper-item>  
     <image src="{{item.url}}" class="slide-image" mode="aspectFill"/>  
    </swiper-item>  
   </block>  
  </swiper> 

//index.js  
//获取应用实例  
var app = getApp()  
Page({  
 data: {  
  movies:[  
  {url:'http://img04.tooopen./images/20130712/tooopen_17270713.jpg'} ,  
  {url:'http://img04.tooopen./images/20130617/tooopen_21241404.jpg'} ,  
  {url:'http://img04.tooopen./images/20130701/tooopen_20083555.jpg'} ,  
  {url:'http://img02.tooopen./images/20141231/sy_78327074576.jpg'}   
  ]  
 },  
 onLoad: function () {  
 }  
})  

/index.wxss/
.swiper {
 height: 400rpx;
 width: 100%;
}
.swiper image {
 height: 100%;
 width: 100%;
}