微信 小程序组件 轮播（原始）
<!--1 轮播部分 -->
<view class="banner-box">
<swiper class="home-banner swiper" indicator-dots="true" autoplay="true" indicator-color="#F5A084" indicator-active-color="#ff3300" interval="3000" duration="1000">
<block wx:key="unique" wx:for="{{banners}}" wx:for-index="index">
<!-- 绑定数据 data-banner -->
<swiper-item bindtap="intoBanner" data-banner="{{item.id}}">
<image class="banner-img" src="{{item.url}}" class="slide-image" mode="aspectFill"/>
</swiper-item>
</block>
</swiper>
</view>
//------------------------------------------
/* 样式轮播部分 **********/
.banner-box{
/* position: relative; */
height: 300rpx;
}
.home-banner{
width: 100%;
height: 300rpx;
}
.home-banner image{
width: 100%;
height: 100%;
}
//------------------------------------------
// JS数据 轮播部分头部轮播数据
banners: [
{
id: 1,
url: '../../imgs/index/wear_1.png'
},
{
id: 2,
url: '../../imgs/index/wear_1.png'
},
{
id: 3,
url: '../../imgs/index/wear_1.png',
}
],
