写在前边:《微信小程序_···》系列的博文,是学习了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的宽高比