微信小程序内轮播图怎样设置成自适应高度

我的思路是：获取屏幕宽度，获取图片的宽高，然后等比设置当前屏幕宽度下swiper的高度。

1.结构

<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-active-color="{{bg}}" style='height:{{Height}}'>    <block wx:for="{{imgUrls}}">     <swiper-item>       <image src="{{item}}" class="slide-image" mode="widthFix" bindload='imgHeight'/>  //bindload是绑定图片加载的事件,记得给image加上mode=“widthFix”这个属性哦，还有就是设置这个image 100%宽度哟     </swiper-item>    </block> </swiper>

swiper的各个属性在官方文档中都有，这里就不说明了。最主要的是： style='height:{{Height}}' //动态设置swiper的高度

2.在page里面：

data: {   imgUrls: [               '../img/goodsDetail/goods.png',     '../img/goodsDetail/goods.png',     '../img/goodsDetail/goods.png'   ],   indicatorDots: true,   autoplay: true,   interval: 5000,   duration: 1300,   bg: '#C79C77',   Height:""     //这是swiper要动态设置的高度属性  }, imgHeight:function(e){   var winWid = wx.getSystemInfoSync().windowWidth; //获取当前屏幕的宽度   var imgh=e.detail.height;//图片高度   var imgw=e.detail.width;//图片宽度   var swiperH=winWid*imgh/imgw + "px"//等比设置swiper的高度。 即 屏幕宽度 / swiper高度 = 图片宽度 / 图片高度  ==》swiper高度 = 屏幕宽度 * 图片高度 / 图片宽度   this.setData({     Height:swiperH//设置高度   }) },

在小程序里动态设置属性，只有通过setData（{ }）来设置，和js中直接操作css样式有一点类似

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读

JS门面模式使用案例详解

JS的try-catch语句与错误类型使用

以上就是微信小程序内轮播图怎样设置成自适应高度的详细内容，更多内容请关注技术你好其它相关文章！