微信小程序 轮播图 swiper图片组件

1.index.wxml

1. <!--index.wxml-->

2. <swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000">

3. <block wx:for="{{movies}}" wx:for-index="index">

4. <swiper-item>

5. <image src="{{item.url}}" class="slide-image" mode="aspectFill"/>

6. </swiper-item>

7. </block>

8. </swiper>

这里有几个属性需要说明.

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

 

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

2.index.js

 

1. //index.js

2. //获取应用实例

3. var app = getApp()

4. Page({

5. data: {

6. movies:[

7. {url:'http://img04.tooopen.com/images/20130712/tooopen_17270713.jpg'} ,

8. {url:'http://img04.tooopen.com/images/20130617/tooopen_21241404.jpg'} ,

9. {url:'http://img04.tooopen.com/images/20130701/tooopen_20083555.jpg'} ,

10. {url:'http://img02.tooopen.com/images/20141231/sy_78327074576.jpg'}

11. ]

12. },

13. onLoad: function () {

14. }

15. })

3.WXML

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