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>
