swiper高度自适应_微信小程序swiper高度自适应

最新推荐文章于 2023-05-05 09:59:01 发布

Rv酋长

最新推荐文章于 2023-05-05 09:59:01 发布

阅读量606

点赞数

文章标签： swiper高度自适应

本文链接：https://blog.csdn.net/weixin_30918493/article/details/113684023

版权

说明：swiper默认高度150px，且无法更改。

解决办法：

wxml中：注意 style=‘height:{{Height}}’、mode="widthFix"和 bindload='imgHeight’

wxss中： .tu { width: 100%; }

js中：注意单位是px，不能是rpx data: { imgUrls: [ "/images/banner1.jpg", "/images/banner2.jpg" ], indicatorDots: true, indicatorColor: 'white', indicatorActiveColor: '#D75B1B', autoplay: true, interval: 5000, Height: "" //这是swiper要动态设置的高度属性 }, // 轮播图宽高自适应 imgHeight: function (e) { var winWid = wx.getSystemInfoSync().windowWidth;//获取当前屏幕的宽度 var imgh = e.detail.height; //图片高度 var imgw = e.detail.width; //图片宽度 //等比设置swiper的高度。即图片宽度 / 图片高度 = 屏幕宽度 / swiper高度 ==》swiper高度 = 屏幕宽度 * 图片高度 / 图片宽度。此处单位为 px，不能是 rpx。 var swiperH = winWid * imgh / imgw + "px"; this.setData({ Height: swiperH //设置高度，此处不能加; }) },