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

小程序中的swiper标签将具有150px的固定高度，但我们实际上希望这个转盘的高度可以动态更改，否则在不同的设备上它将是150px，并且会出现样式问题。本文将为您介绍解决这一高问题的方法，希望可以帮助到您！

1.概观

小程序将轮播地图标签的固定高度设置为150像素。这种风格在大屏设备上并不明显，但如果换成iphone5等小屏机型，画面高度就不会达到150px。因为我将图片的模式设置为widthFix，这样图片的高度就可以根据宽度进行适配。因此，要解决的问题是使转盘的高度随着画面的高度而变化。

2、解决

1）为swiper设置一个内联样式，将一个动态数据绑定到高度，并为内部图像标记设置一个ID =“swiper -image”；并且图像标签有一个事件:bindload，该事件只有在图像加载后才会被触发，并且该事件将被绑定为一张图片。

2）在index.js文件的数据中声明一个变量swiperHeight来存储SwiperHeight标记的高度。

3）然后编写图像绑定的bindload事件处理程序handleSwiperImageLoaded，使用小程序的wx.createSelectorQuery（），创建节点选择器，并调用query . select（# swiper -image）。BoundingClient（）。exec（（RES）=》{ }）方法来获取图像的具体信息。最后，将捕获图像的覆盖率设置为swiperHeight，它将被动态绑定为swiper标记，页面样式显示将是正常的。

3.最佳化

1）因为我请求的图片有十几张，这个方法会被调用十几次，所以我可以写一个防抖函数来解决这个问题。我在根目录下的until.js目录下新建了一个hook.js文件，用来存放我封装的js函数，在里面写入防抖函数并导出。

2）将封装的防抖功能引入home -音乐目录中的index.js。

3）使用handleSwiperImageLoaded方法中的防抖功能，该方法只有在加载最后一张图片后才会触发。

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

以上就是总结分享小程序中swiper旋转木马高度问题解决方案的详细内容。更多资讯请关注主机参考其他相关文章！

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

• 如何实现小程序发送服务通知（小程序如何主动向用户发送通知）
• 如何获取小程序的unionid（如何获取小程序的页面路径）
• 生成海报的示例小程序（Java后端）（微信小程序生成海报演示）
• 什么是小程序？ 有哪些功能？（什么是小程序？有哪些功能？）
• 介绍如何用小程序生成参数二维码（二维码+小程序参数）

本文由主机参考刊发，转载请注明：总结分享小程序中swiper转盘高度问题的解决方案。 https://zhujicankao.com/104554.html