#微信小程序# 轮播图swiper高度实现页面自适应

微信小程序学习笔记 轮播图swiper高度实现页面自适应

微信小程序中的轮播图一般使用swiper滑块视图容器来制作，官方文档如下：swiper | 微信开放文档
首先，swiper标签存在默认的宽度和高度。

width:100%;
height:150px;

在轮播图中，我们所要展示的图片往往不会完全与轮播图的长宽相符，而且不同机型的屏幕大小也不尽相同，因此为了能够使得图片看起来赏心悦目，可以采用以下步骤来实现swiper的高度自适应。

第一步：获取轮播图中所要展示图片的宽度和高度

例如

width:590px;
height:470px;

第二步：等比例定义swiper的高度 ( 宽度默认为100% )

根据等比例的定义我们可以得到以下等式：

swiper的宽度 / swiper的高度 = 所展示图片的宽度 / 所展示图片的高度

化简可得

swiper的高度 = swiper的宽度 * 所展示图片的高度 / 所展示图片的宽度

第三步 修改swiper的样式

wxss中表达式的值用 calc(表达式) 计算得出

swiper{
    width:100%;
    height:calc(100vw*470/590);
}

注：

calc：英文单词calculate(表达式)的缩写，是css3的一个新增的功能，用来指定元素的长度，在wxss中也适用。

vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）

第四步 修改image的样式和属性

在wxss中image标签是有默认大小的，其值为320 * 240，我们需要先修改image标签的width属性为100%

image{
    width: 100%;
}

然后将mode属性的值改为widthFix，即缩放模式，宽度不变，高度自动变化，保持原图宽高比不变。

<image mode="widthFix" src="//imgcps.jd.com/ling4/3195185/5LyB5Lia5bm05Lya5a2j/5LyB5Lia5LiT5Lqr5L2O6IezNeaKmA/p-5bd8253082acdd181d02fa06/2814ee6e/cr/s/q.jpg" /></swiper-item>

效果图如下

如有不足还请多多指教。