小程序开发-轮播图-swiper

微信开发者文档中的swiper

实现代码：

<view class="index">
  <swiper class="index-swiper" indicator-dots="{{true}}"
    autoplay="{{true}}" circular="{{true}}" easing-function="{{easeInCubic}}">
       <block wx:for="{{imgUrls}}" wx:key="index">
      <swiper-item>
        <image src="{{item}}" class="slide-image" mode="widthFix" />
      </swiper-item>
    </block>
  </swiper>
</view>

其中{{imgUrls}}变量存放轮播图中图片的路径，使用wx:for来循环渲染实现轮播的效果。

swiper中的属性也可以在微信开发者文档中进行查看。

在最新更新的微信开发者工具版本中
wx:key="{{index}}"的写法变为->wx:key=“index” 去掉了双大括号。