uniapp的swaper标签，height高度不生效。

最新推荐文章于 2024-02-04 18:01:09 发布

三个人工作室

最新推荐文章于 2024-02-04 18:01:09 发布

阅读量519

点赞数 1

分类专栏： vue uniapp js 文章标签： uni-app html 前端

本文链接：https://blog.csdn.net/wwppp987/article/details/130089773

版权

vue 同时被 3 个专栏收录

59 篇文章 0 订阅

订阅专栏

uniapp

47 篇文章 0 订阅

订阅专栏

41 篇文章 0 订阅

订阅专栏

文章主要讨论了在使用colorUI或uviewUI框架时遇到的swiper组件中图片显示有空白的问题。问题根源在于min-height设置。通过将min-height设置为100%，并确保正确应用样式，可以修复长条形图片在swiper中的显示问题，从而实现全屏填充无空白的效果。

摘要由CSDN通过智能技术生成

当时
使用colorUI（原理所有框架通用uviewUI也是）高度无法生效，图片（长条形）总是有空白
原因：设置了min-height（colorUI是screen-swiper的class）
从浏览器当中进行定位即可

修改后的代码：style="min-height: 100%;"

		<view>
			<swiper class="screen-swiper square-dot" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000"
				duration="500" style="min-height: 100%;">
				<swiper-item v-for="(item,index) in swiperList" :key="index" >
					<image :src="item.url" mode="widthFix" v-if="item.type=='image'"></image>
					<!-- <video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover"
						v-if="item.type=='video'"></video> -->
				</swiper-item>
			</swiper>
		</view>