小程序开发 轮播

1wxss

/* 轮播 */
 .banner-box{
  /* position: relative; */
   height: 300rpx; 
}

  .home-banner{
   100%;
  height: 300rpx;
} 
.home-banner image{
   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>