小程序开发 轮播
1wxss
/* 轮播 */
.banner-box{
/* position: relative; */
height: 300rpx;
}
.home-banner{
width: 100%;
height: 300rpx;
}
.home-banner image{
width: 100%;
height: 100%;
}
2js
// 头部轮播数据
banners: [
{
id: 1,
url: '../../imgs/index/banner_1.png'
},
{
id: 2,
url: '../../imgs/index/banner_1.png'
},
{
id: 3,
url: '../../imgs/index/banner_1.png',
}
],
3,wxml
<!-- 轮播 -->
<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">
<swiper-item>
<image class="banner-img" src="{{item.url}}" class="slide-image" mode="aspectFill"/>
</swiper-item>
</block>
</swiper>
</view>