微信小程序之swiper轮播图中的图片自适应高度的方法
小程序中的轮播图很简单,官方都有例子的,但是唯一的缺陷就是swiper是固定死的150px高度,这样如果传入的图片大于这个高度就会被隐藏。辣么,怎样让图片自适应不同分辨率捏。 我的思路是:获取屏幕宽度,获取图片的宽高,然后等比设置当前屏幕宽度下swiper的高度。 1.结构 swiper的各个属性在官方文档中都有,这里就不说明了。最主要的是: style='height:{{Height}}' //动态设置swiper的高度 2.在page里面: 总结:获取当前屏幕宽度: wx.getSystemInfoSync().windowWidth 在小程序里动态设置属性,只有通过setData({ })来设置,和js中直接操作css样式有一点类似 注意:image如果外层有个容器装,然后image设置width为100%之后,距离装它的容器底部有一点距离,那是因为image是默认设置的display:inline-block属性,这个属性会产生间隙。如果要撑满容器,设置为display:block就可以了。 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |