swiper组件里的image默认宽度320,高度200,这无法满足我们的需求,就需要我们自己修改尺寸和属性了,这里记录下自己的解决办法。首先给image的width设置为100%,此时图片的大小会根据屏幕宽度自动适应大小了。height默认为200,如果需要调整的话直接设置到合适的尺寸即可。另外还有一个属性很重要,就是mode属性,mode有13种模式,具体文档中有介绍,这里不再阐述;我是使用widthFix,宽度不变,高度自动变化,并且保持原图宽高比不变。
这里展示一下使用widthFix的前后效果:
使用前:
使用后:
很明显,没有使用widthFix之前,图片是被拉伸导致变形的;使用之后,图片会等比例等缩放显示。
wxml:
indicator-dots="true"
autoplay="true"
interval="true"
duration="true"
interval="3000"
class="swiperHome"
>
wxss:
.swiperHome {
height: 230px;
}
.slide-image {
width: 100%;
}