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
效果图: