微信小程序之swiper轮播图中的图片自适应高度的方法.pdfVIP

微信⼩程序之swiper轮播图中的图⽚⾃适应⾼度的⽅法 ⼩程序中的轮播图很简单，官⽅都有例⼦的，但是唯⼀的缺陷就是swiper是固定死的150px⾼度，这样如果传⼊的图⽚⼤于这个⾼度就会被隐藏。辣么，怎样让图⽚⾃适 应不同分辨率捏。 我的思路是：获取屏幕宽度，获取图⽚的宽⾼，然后等⽐设置当前屏幕宽度下swiper的⾼度。 1.结构 block wx:for={{imgUrls}} swiper-item image src={{item}} class=slide-image mode=widthFix bindload=imgHeight/是绑定图⽚加载的事件,记得给image加上mode=“widthFix”这个属性哦，还有就是设置这个//bindloadimage 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//设置⾼度 }) }, 总结：获取当前屏幕宽度： wx.getSystemInfoSync().windowWidth 在⼩程序⾥动态设置属性，只有通过setData（{ }）来设置，和js中直接操作css样式有⼀点类似 注意：image如果外层有个容器装，然后image设置width为100%之后，距离装它的容器底部有⼀点距离，那是因为image是默认设置的display:inline-block属性，这个属 性会产⽣间隙。如果要撑满容器，设置为display:block就可以了。 以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。