图片轮播

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

• 28669

 照着开发文档尝试,总是能有所收获.之前做Android开发,做个轮播图并不简单,用上viewpage再设置圆点,折腾一通之后还一堆bug.今天尝试微信小程序开发做轮播图,真是感动的泪流满面.废话说完了,上图.

上图就是一个简易的轮播图,是不是很简易.23333

主要是代码也很简单.

1.index.wxml

[html]   view plain  copy

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

[html]   view plain  copy

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%;
}

WXSS不多说,跟CSS没啥区别.

不明白的看看开发文档

http://blog.youkuaiyun.com/qq_31383345