微信小程序_uni-app_轮播图组件_swiper

写在前边：《微信小程序_···》系列的博文，是学习了b站《前端开发利器vue，微信小程序快速开发实战，黑马程序员前端web教程》BY黑马程序员之后，的学习笔记，这是视频地址：https://www.bilibili.com/video/BV1Sc41187nZ?p=1，该视频是讲了一个基于uni-app的项目

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的宽高比