轮播图uniapp

布局view

  <view class="page-section-spacing">
        <swiper class="swiper" 
            indicator-dots="true" 
            autoplay="true" 
            interval="5000" 
            duration="1500" >
            <swiper-item v-for="(item,index) in lunbo" :key="index">
                <image :src="item.img" mode="aspectFill"></image>
            </swiper-item>
        </swiper>
      </view>

样式

  //轮播控件外部view样式
.page-section-spacing{
    width: calc(100% - 60upx);
    margin: 30upx 30upx;
}
.swiper{
    height: 300upx;
    width: 100%;
}

// swiper-item 里面的图片高度
swiper-item image{
    width: 100%;
    height: 300upx;
    border-radius: 20upx 20upx 0 0;
}

逻辑代码

  lunbo: [{
                    img: "/static/images/liu1.png"
                },
                {
                    img: "/static/images/liu2.png"
                },
                {
                    img: "/static/images/liu3.png"
                }
            ],