微信小程序——图片轮播

图片轮播

HTML
（官方文档）

<swiper
  indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}"
  interval="{{interval}}"
  duration="{{duration}}"
>
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" width="355" height="150" />
    </swiper-item>
  </block>
</swiper>

js(html文档所对应的js)
图片路径为从整个文件最外层写路径

Page({
  data: {
      imgUrls: [
        '/pages/img/img_1.jpg',
        '/pages/img/img_2.jpg',
        '/pages/img/img_3.jpg'
      ],
    }
  }

如果轮播框未占满整个页面，需要给page及轮播view设置宽高