小程序轮播使用的控件是swiper,该控件的使用主要注意它的使用参数,如下代码demo,使用注意如下两点
- 使用的绑定函数是用bindtap 绑定“onProductsItemTap”函数。
- 事件的使用当使用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%;
}
结果效果如下