如何将微信小程序中的轮播设置为自适应高度(微信小程序中轮播的大小)

这次给大家带来的是如何将微信小程序中的转盘设置为自适应高度，以及如何将微信小程序中的转盘设置为自适应高度有哪些注意事项？以下是实际案例。让我们来看看。

我的想法是:获取屏幕宽度，获取图片的宽度和高度，然后在当前屏幕宽度下等比例设置刷屏器的高度。

1.结构

& ltswiper指示器-dots = & quot；{ { indicatorDots } } & quot自动播放= & quot{ {自动播放} } & quot间隔= & quot{ { interval } } & quot持续时间= & quot{ { duration } } & quotindicator -active -color = & quot；{ { bg } } & quotstyle = & # 039身高:{ { Height } } & # 039& gt& lt块wx:for = & quot；{ { imgUrls } } & quot& gt& ltswiper -item & gt；& ltimage src = & quot{ { item } } & quotclass = & quot幻灯片-图像& quotmode = & quot宽度固定& quotbindload = & # 039imgHeight & # 039/& gt；//bindload是绑定图像加载事件。记得给图像添加属性mode = "width fix ",并将该图像的宽度设置为100%。& lt/block & gt；& lt/swiper & gt；swiper的所有属性都在官方文档里，这里就不解释了。最重要的是:style = & # 039身高:{ { Height } } & # 039//动态设置swiper的高度

2.在页面中:

数据:{ imgUrls:[& # 039；../img/goods detail/goods . png & # 039；, '../img/goods detail/goods . png & # 039；, '../img/goods detail/goods . png & # 039；]，indicatorDots: true，autoplay: true，interval: 5000，duration: 1300，BG:& # 039；# C79C77 & # 039，身高:& quot"//这是swiper要动态设置的高度属性}，img eight:function(e){ var win wid = wx . getsysteminfosync()。窗口宽度；//获取当前屏幕的宽度var imgh = e . detail . height；//图像高度var imgw = e . detail . width；//image width var swipe RH = winwid * imgh/imgw+" px & quot；//按比例设置swiper的高度。即屏幕宽度/swiper height =画面宽度/画面高度= ==》swiper height =屏幕宽度*画面高度/画面宽度this . setdata({ height:wiper RH//set height })}，总结:获取当前屏幕宽度:wx.getsysteminfosync()。窗口宽度。

在小程序中动态设置属性只能通过setData({})来完成，类似于在js中直接操作css样式。

注意:图像如果外层有一个容器，然后将图像的宽度设置为100%，那么距离安装它的容器底部有一点距离。那是因为图像是默认的display:inline-block属性，会造成空隙。如果要填充容器，只需设置为显示:block即可。

相信你看完这个案例已经掌握了方法。更多精彩请关注即时码站其他相关文章！

推荐阅读

JS facade模式用例的详细解释

JS的Try-catch语句用于错误类型。