uni-app框架swiper里面图片大小自适应问题(5+app端无法适应问题)

uni-app 程序示例

图片显示采用了image组件,设置image组件的scaleToFill模式(不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素)

swiper布局代码:


<view class="uni-margin-wrap">
			<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item>
					<image mode="scaleToFill"  src="../../static/img/20130722100852852.jpg" class="swiper-image" > image>
				swiper-item>
				<swiper-item>
					<image mode="scaleToFill"  src="../../static/img/201307180932273227.jpg"  class="swiper-image"> image>
				swiper-item>
				<swiper-item>
				
					<image mode="scaleToFill"  src="../../static/img/201307221141164116.jpg"  class="swiper-image">	image>
				swiper-item>
			swiper>
		view>

样式代码:

 .uni-margin-wrap {
 	
	height:100%;
 	margin:0 0upx;
 }
 .swiper {
 	height: 300upx;
 }
 .swiper-item {
 	display: block;
    line-height: 300upx;
 	text-align: center;
 }
 /*图片宽度设置100% ,高度300upx(设为auto图片无法显示)*/
 .swiper-image{  
     width:100%;  
     height:300upx; 
 } 

image组件详细参考 官方文档:https://uniapp.dcloud.io/component/image

效果图:
uni-app框架swiper里面图片大小自适应问题(5+app端无法适应问题)_第1张图片

你可能感兴趣的:(❤,uni-app)