微信小程序写一个轮播图

对于前端工程师来说，轮播图并不陌生，无论是通过position 还是通过tansform，再配合js中的setInterval()都可以实现，但是轮播图的难点就是无缝衔接。
而微信小程序提供的swiper组件可以很快的做出一个无缝衔接的轮播图。

先简单介绍一下swiper组件
（以下内容转自官方http://developers.weixin.qq.com/miniprogram/dev/component/swiper.html）

根据官方文档，我们可以用下列代码生成一个轮播图：

<!-- wxml -->
<swiper class='u-wrp-bnr' indicator-dots='true' autoplay='true' interval='5000' duration='1000' circular='true'>
  <block wx:for="{{bnrUrl}}" wx:for-index="index">
    <swiper-item>
      <image src='{{item.url}}' class='u-img-slide' mode='aspectFill'></image>
    </swiper-item>
  </block>
</swiper>
<!-- wxml -->

//js
Page({
  data: {
    "bnrUrl": [{
      "url": "img/1242x366-1531449084.jpg"
    }, {
      "url": "img/1242x366_djj_0706-1530871651.jpg"
    }, {
      "url": "img/1242x366_lyx_0709-1531122892.jpg"
    }, {
      "url": "img/14540040236323_1_o.jpg"
    }]
  }
});
//js

//wxss
.u-wrp-bnr {
  width: 100%;
  height: 200rpx;
  display: block;
  position: relative;
  top: 100rpx;
  background: #f0f0f0;
}
.u-img-slide {
  width: 100%;
  height: inherit;
}
//wxss

主要用到了几个属性：

属性	功能
indicator-dots='true'	面板指示圆点
autoplay='true'	自动播放
interval='5000'	每次轮播间隔
duration='1000'	轮播动画时长
circular='true'	无缝衔接

我的解释可能和官方的有所出入，但意思基本差不多。