使用微信小程序swiper组件实现轮播图时带来的swiper与image标签自带的默认宽高引问题

问题:

1)使用两个微信小程序内置的swiper组件实现轮播图效果时,注意swiper是带有默认高度的,为150px
2)轮播图的实现,故名思意,根据文档介绍,其使用结构大致如下:

在这里插入图片描述
3)而image也是有默认高度的(240px),默认宽度(320px),如果不控制swiper与image之间宽高的比例,那么不同设备之间显示的效果有很大的差异(换句话说,就是你不改变比例,那么不管你怎样切换设备,其swiper、image宽高都是固定的,而设备屏幕宽高一直在变化)

解决

思想:将图片的额宽高等比例变成swiper的宽高(即使得图片与swiper的宽高比一致)
在这里插入图片描述

  1. 先看原始图片的宽高,计算出其宽高比
    比如这里我选取的图片宽高为:414*183,那么其宽高比为414/183=2.26…-----约等2.3
    这里注意,一般宽高比为2.多的,其设计稿宽度一般为750px)

在这里插入图片描述

2.因此,使用calc计算的swiper的高度
在这里插入图片描述
这里使用calc是需要注意要在/号(其他运算符也是同理)两边添加空格,不然不生效!!!!

结果:

1.使用之前
在这里插入图片描述

在这里插入图片描述
2.使用之后:
在这里插入图片描述

在这里插入图片描述
补充:
在这里插入图片描述

完结!

Guess you like

Origin blog.csdn.net/weixin_46872121/article/details/111244907