微信小程序轮播图

swiper标签

<!--index.wxml-->
  <swiper class="swiper" indicator-dots="true" autoplay="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.com/images/20130712/tooopen_17270713.jpg'} ,
  {url:'http://img04.tooopen.com/images/20130617/tooopen_21241404.jpg'} ,
  {url:'http://img04.tooopen.com/images/20130701/tooopen_20083555.jpg'} ,
  {url:'http://img02.tooopen.com/images/20141231/sy_78327074576.jpg'}
  ]
 },
 onLoad: function () {
 }
})

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

效果图