照著開發文件嘗試,總是能有所收穫.之前做Android開發,做個輪播圖並不簡單,用上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>  
 

微信小程式開發的迴圈用到了<block wx:for >

我這裡是遍歷movies[]陣列.<swiper-item>就是item

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

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

http://blog.csdn.net/qq_31383345