在小程序中 swiper 标签会有自己固定的高度 150px，但我们实际上希望这个旋转图的高度能够动态地改变，否则在不同的设备上都是如此 150px 样式问题会出现在高度。本文将向您介绍这个高度问题的解决方案，希望对您有所帮助！

1、概述

???????小程序为旋转图标标签设置了固定的高度 150px，这种款式在大屏幕设备上看起来不是很明显，但如果换成 ?iphone5 对于这种小屏幕模型，图片的高度不会达到 150px。由于我设置了图片 mode 为 widthFix，根据宽度适应图片的高度。因此，需要解决的问题是让轮播图的高度随图片的高度而变化。

2、解决

1）、给 swiper 设置行内风格，height 绑定动态数据，给内部 image 设置一个标签 id="swiper-image"；并且 image 标签中有一个事件：bindload，这个事件只有在图片加载完成后才会触发，并将这个事件绑定到图片中

官网文档：https://developers.weixin.qq.com/miniprogram/dev/component/image.html

注意:为什么我不在这里？ onLoad 在生命周期中获得 image 由于图像的高度，这是由于图像的高度 onLoad 如果你使用一些方法来获取图片信息，你只能从当地的图片中获得准确的信息。但是，当组件加载后，您可能无法获得从网络上获取的图片的具体数据，所以使用 image 自带的 bindload 获取具体信息的事件

2）、在 index.js 文件中的 data 声明一个变量 swiperHeight，来存储 swiper 标签的高度

3）、然后书写 image 绑定的 bindload 事件处理函数 handleSwiperImageLoaded，使用小程序 wx.createSelectorQuery()创建节点选择器后，调用 query.select('#swiper-image').boundingClientRect().exec((res) => {}) 方法，获取图片的具体信息。最后，设置获得图片的盖度 swiperHeight，动态绑定就是这样 swiper 标签，页面样式显示正常

3、优化

1）、因为这里有十几张我要求的图片，所以这个方法会被调用十几次，所以我可以写一个防抖函数来解决这个问题。我在根目录下 until.js 在目录中，新建一个 hook.js 文件用于存储我包装的文件 js 在这里编写防抖函数并导出功能函数

2）、在 home-music 目录下的 index.js 引入包装的防抖函数

3）、在 handleSwiperImageLoaded 防抖函数可用于该方法，只有在最后一张图片加载后才能触发该方法

【相关学习推荐:小程序开发教程】

以上是对共享小程序的总结 swiper 详情请关注其他相关文章，解决轮播图高度问题！