uni-app 中 swiper 轮播图高度自适应
时间: 2024-01-26 16:13:49 浏览: 271
swiper卡牌式与全屏限高是轮播图.zip
在uni-app中,可以通过以下两种方法实现swiper轮播图的高度自适应:
方法一:
在swiper组件的样式中,设置高度为宽度的一定比例。具体来说,可以使用calc()函数来计算高度,公式为:swiper高度 = swiper宽度 * 原图高度 / 原图宽度。例如:
```html
<swiper class="swiper-box" indicator-dots autoplay circular>
<swiper-item v-for="(item, i) in imgList" :key="i">
<image style="width: 100%" :src="item" mode="widthFix" />
</swiper-item>
</swiper>
```
```css
.swiper-box {
width: 100%;
height: calc(100vw * 9 / 16);
}
```
方法二(推荐):
使用uni-app提供的自定义组件swiper-plus,该组件可以自动计算图片的宽高比,并根据宽度自适应高度。具体使用方法可以参考uni-app官方文档。
阅读全文