在应用开发的过程中，经常使用轮播图滚动展示一些图片

微信小程序提供了swiper组件，可以方便地实现这些功能

swiper组件分为两个部分
一个是外部的swiper组件
一个是嵌套在swiper内的swiper-item组件，并且swiper内也只能嵌套swiper-item组件

swiper组件可以设置的属性image.png

嵌套在swiper内部的swiper-item组件的属性只有一个item-id属性，用来标识每个swiper-item的id，其值类型为string，代码如示例3-7所示

  1. index.wxml
  3. <view>
  4.   <swiper
  5.    indicator-dots
  6.    indicator-color="#000"
  7.    indicator-active-color="#05f"
  8.    autoplay
  9.    interval="1000"
  10.    circular
  11.    >
  12.     <block wx:for="{{banners}}" wx:key="*this">
  13.             <swiper-item>
  14.               <view class="swiper-item">
  15.                 <image src='{{item.url}}' mode="scaleToFill"></image>
  16.               </view>
  17.             </swiper-item>
  18.     </block>
  19.   </swiper>
  20. </view>
  21. -----------------------------------------------------------------------------
  22. index.js
  24. Page({
  25.   data: {
  26.     banners:[
  27.       { url: "/public/imgs/bg1.jpg"},
  28.       { url: "/public/imgs/bg2.jpg" },
  29.       { url: "/public/imgs/bg3.jpg" }
  30.     ]
  31.   }
  32. })

示例3-7中有3张轮播图，指示点默认颜色是“#000”，当前选中的指示点颜色为“#05f”，轮播图会每隔1s自动播放，并且通过circular设置了循环播放。轮播图显示效果如图3.7所示。
image.png