小程序banner组件的简单实现

banner组件的展示是目前在App和小程序，以及PC端应用最常见的UI组件。

先看下banner在小程序中的简单使用。

1. swiper组件： 滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。

2. 基本用法： （1）wxml中：

<view class="banner" wx:if="{{bannerItems.length>0}}">
                    <swiper autoplay="true" interval="3000" duration="500" circular="true">
                        <swiper-item wx:for-items="{{bannerItems}}" data-index="{{index}}" wx:key="bannerId">
                            <view class="banner-card" catchtap='bannerLocation' id="{{index}}">
                                <image bindtap='statistics' class='banner-img' id="{{index}}" src="{{item.imgURL}}"></image>
                            </view>
                        </swiper-item>
                    </swiper>
</view>

（2）关键代码： [jcode](https://code.juejin.cn/pen/7220722428882714679)

3.详细可参考微信官方文档： developers.weixin.qq.com/miniprogram…