微信小程序Banner实现

1.小程序实现Banner图

微信小程序实现Banner相对于Android实现Banner来说非常便捷的，如图：

2.在.js中定义数据源如下：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    // Banner数据
    images:[
      "http://img.zcool.cn/community/014056564bd8596ac7251c94eb5559.jpg",
      "http://img.zcool.cn/community/01e03b58047e96a84a0e282b09e8fc.jpg",
      "http://pic.90sjimg.com/back_pic/00/00/69/40/d678a42886e0232aaea0d6e69e9b1945.jpg",
      "http://img.zcool.cn/community/0132dd55800bc700000059ffbe83e9.jpg@1280w_1l_2o_100sh.jpg",
      "http://img.zcool.cn/community/0154755a2df102a80120ba3828b5af.jpg@1280w_1l_2o_100sh.jpg",
      "http://pic.90sjimg.com/back_pic/00/00/69/40/bf4f8e2ab7e05dc3c7cc2a7f7e9c2fe7.jpg",
      "http://img.zcool.cn/community/01a2a2594943d3a8012193a328e0fd.jpg@1280w_1l_2o_100sh.jpg"
    ],
    // 是否显示面板指示点
    indicatorDots: true,
    // 滑动方向是否为纵向
    vertical: false,
    // 自动切换
    autoplay: true,
    // 采用衔接滑动
    circular: true,
    // 自动切换时间间隔2s
    interval: 2000,
    // 滑动动画时长0.5s
    duration: 500,
    // 前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值
    previousMargin: 0,
    // 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值
    nextMargin: 0
  },
}

3.在.wxss编写组件样式如下：

.swiper-item-images{
  width: 100%;
  height: 300rpx;
}

4.在.wxml中具体使用

<swiper indicator-dots="{{indicatorDots}}" 
        autoplay="{{autoplay}}" 
        circular="{{circular}}" 
        vertical="{{vertical}}" 
        interval="{{interval}}" 
        duration="{{duration}}" 
        previous-margin="{{previousMargin}}px" 
        next-margin="{{nextMargin}}px">
    
    <block wx:for='{{images}}' wx:key='index'>
      <swiper-item>
        <image src='{{item}}' mode='aspectFill' class='swiper-item-images'/>
      </swiper-item>
    </block>

</swiper>