共享小程序滑动器轮播高度问题的解决方案摘要。

小程序中滑动标签的高度固定为150像素，但我实际上希望能够动态改变轮播的高度。 否则，高度将为 150 像素，并且样式将出现在各种设备上。 问题。 本文提出了解决这个高度问题的方法。 希望这对您有所帮助！

1. 概述

小程序将轮播标签的高度固定为 150 像素。 这种风格在大屏幕设备上看起来不一样。 不是很明显，但是如果换成iPhone 5这样屏幕较小的机型，照片的高度就达不到150px。 您为图像设置的模式是widthFix，因此图像的高度将根据其宽度进行调整。 所以我需要解决的问题是根据图像的高度改变轮播的高度。

2.解决方案

1）为swiper设置内联样式，将高度绑定到动态数据，并使用内部图像标签=“swiper” -图像”。 并且图像标签有一个事件“bindload”。 该事件在图片加载完成且事件与图片绑定后触发。

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

2）调整刷卡标签的高度来存储使用 index.js 文件中的数据声明一个变量 swiperHeight。

3)、然后使用绑定到bindload图片的事件处理函数handleSwiperImageLoaded，小程序的wx.createSelectorQuery()创建节点选择器并查询调用.select('# swiper-image').boundingClientRect。使用 ().exec((res) => {}) 方法获取图像特定信息。 最后将获取图像的覆盖范围设置为swiperHeight。 这样就会动态地将图片绑定到swiper标签上，页面样式显示就正常了。

3. 优化

1)。 由于我的请求有十几张照片，这个方法将被调用超过10次，所以我正在创建一个图像稳定功能来解决这个问题。 能。 在根目录下的until.js目录下新建hook.js文件，存放封装好的js函数，在里面写入防抖功能，并导出。

2）引入home-music目录下index.js封装的防抖功能

3） ，只需使用handleSwiperImageLoaded中的图像稳定功能即可。 方法。 该方法只有在加载最后一张图片后才会被触发。

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

PHP快速学习视频免费教程（从入门到精通）

学习PHP如何入门应该在哪里学习PHP？如何快速学习PHP？ 这里有简单的 PHP 学习教程（从初学者到专家）。 您可以保存并下载您想学习的朋友。

下载

这几篇文章你可能也喜欢：

• 总结分享小程序中swiper转盘高度问题的解决方案。

本文由主机参考刊发，转载请注明：共享小程序滑动器轮播高度问题的解决方案摘要。 https://zhujicankao.com/141642.html