微信 小程序组件 轮播（原始）

<!--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',

}

],

转载于:https://www.cnblogs.com/dianzan/p/7520158.html