微信小程序开发（三）轮播图

wxml

<view>
  <swiper autoplay='true' interval='3000' duration='200' circular='true' bindtap="clickSwiper" indicator-dots="true">
    <block wx:for="{{swiperImages}}" wx:key="*this">
      <swiper-item>
        <image src="{{item}}" class="slide-image" mode="scaleToFill"></image>
      </swiper-item>
    </block>
  </swiper>
</view>

1. 将要用作轮播图的图片在js中配置好，建议将图片放在专业图床网站上；
2. block承载wx:for从而遍历图片组；
3. image组件默认宽高为（320*240）px；

js

data: {
    swiperImages:[
      "src1",
      "src2",
      "src3"
    ]
  },