微信小程序_uni-app_轮播图组件_swiper
1 轮播图组件_swiper
swiper组件的介绍： 1. 自动轮播autoplay 2. 指示器indicator-dots 3. 衔接轮播circular 4. 轮播图的样式：详见5，6，7 5. swiper的高度默认是150px， 6. image的默认宽度320px（已重置为100%），高度默认240px 7. swiper-item的高宽，继承swiper 8. 因此，将swiper的高度设置为=(750 / image的宽高比)；
2 代码示例
<!--轮播图-->
<view class="banner_wrap">
<swiper
autoplay
indicator-dots
circular>
<swiper-item
v-for="item in bannerList"
:key="item.id">
<image :src="item.thumb"></image>
</swiper-item>
</swiper>
</view>
<style scoped lang="scss">
.banner_wrap{
swiper{
height: calc(750rpx / 2.3);
}
}
</style>
3 代码解释
bannerList是轮播图数组 item.thubm是图片的地址 height: calc(750rpx / 2.3)，这里2.3是image的宽高比
上一篇：
uniapp开发微信小程序-2.页面制作