微信小程序_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的宽高比
上一篇:MySQL的日志


下一篇:js文件导入swiper方法及分页器不显示原因