3、微信小程序开发のswiper图片组件

微信小程序中的swiper图片组件主要是代码很简单。
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>

2.index.js

//index.js  
//获取应用实例  
var app = getApp()  
Page({  
  data: {  
    movies:[  
      { url: 'https://img04.sogoucdn.com/app/a/100520093/66ccbe631f3b0ce2-06138918aa1f7763-69f5926dc0b97baf69c3f7c84f3067c8.jpg' },
      { url: 'https://a2.att.hudong.com/53/51/16300000178518124461515846560_950.jpg' },
      { url: 'http://pic19.nipic.com/20120210/9335935_195635332170_2.jpg' },
      { url: 'http://img.sucai.redocn.com/attachments/images/201003/20100302/20100227_5118efc039e755357f07BFdWDJN9cxbY.jpg' } 
    ]  
  },  
  onLoad: function () {  
  }  
})  

3.WXML

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

更多详情请访问官方
https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html