小程序轮播图片的实现，控件绑定的事件的实现

小程序轮播使用的控件是swiper,该控件的使用主要注意它的使用参数，如下代码demo，使用注意如下两点

1. 使用的绑定函数是用bindtap 绑定“onProductsItemTap”函数。
2. 事件的使用当使用data-id传入如下 key_word参数，可以在js中函数调用得到相应的key_word。

 <swiper indicator-dots="true" autoplay="true" class="swiper">
        <block wx:for="{{bannerArr}}">
            <swiper-item class="banner-item" bindtap="onProductsItemTap" data-id="{{item.key_word}}">
                <image class="item-image" src="{{item.img.url}}" mode="aspectFill" />
            </swiper-item>
        </block>
    </swiper>

 onProductsItemTap: function (event) {
    console.log(event);
    var id = home.getDataSet(event, 'id');
    wx.navigateTo({
      url: '../products/product?id=' + id
    })
  },

如下CSS代码

.swiper{
  height: 400rpx;
  width: 100%;
}
.swiper-box{
  overflow-x: hidden;
}
.banner-item{
  height: 100%;
  width: 100%;
}
.banner-item image{
  height: 100%;
  width: 100%;
}

结果效果如下