微信小程序实现图片轮播功能

index.wxml代码：

<!--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> 

 

微信小程序开发的循环用到了<block wx:for >

我这里是遍历movies[]数组.<swiper-item>就是item

.index.js：

 //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.WXML

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

谢谢大家阅读，请大家多多支持！