[新手教程] 微信小程序 輪播圖 swiper圖片組件

http://www.9miao.com/thread-113781-1-1.html

照着開發文檔嘗試,總是能有所收穫.之前做Android[/url]開發,做個輪播圖並不簡單,用上viewpage再設置圓點,折騰一通之後還一堆bug.今天嘗試微信小程序開發做輪播圖,真是感動的淚流滿面.廢話說完了,上圖.

上圖就是一個簡易的輪播圖,是不是很簡易.23333

主要是代碼也很簡單.

1.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>
  

[color=rgb(51, 51, 51) !important]複製代碼

這裏有幾個屬性需要說明.

微信小程序開發的循環用到了<block wx:for >

我這裏是遍歷movies[]數組.<swiper-item>就是item

2.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 () {
•   }
• })
  

[color=rgb(51, 51, 51) !important]複製代碼

3.WXML

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

WXSS不多說,跟CSS沒啥區別.