微信小程序动态获取scroll-view的高度
本来想今天给大家写一个上传一个单图片或者多图片的封装函数,奈何今天起得晚,还要上班,就给大家介绍一个动态获取scroll-view的高度的方法。
在我们做商城或者文章列表时我们经常会使用scroll-view这个组件。官方是这么介绍scroll-view
当我们使用竖向滚动时,需要给scroll-view一个固定高度,通过 WXSS 设置 height。
但是由于设备的不一样,怎么动态的给scroll-view高度呢
于是我封装了一个方法来动态获取scroll-view的高度,并且适配一切设备
方法如下
function rem(height, successData){
//获取设备信息
wx.getSystemInfo({
success:(res)=>{
//判断是否传入高度
if(height!=null&&height!=undefined&&height!=''){
//如果传入高度则用设备的高度减去设备宽度除以设计图的宽度750再乘以传参进来的高度
var myheight =res.windowHeight-res.windowWidth/750*height
}else{
//如果没有传入高度则直接等于设备高度
var myheight = res.windowHeight
}
//调用成功函数并把算出来的高度传出去
successData(myheight)
},
fail: function(res) {},
complete: function(res) {},
})
}
这个方法的用法就是当你需要用scroll-view的时候你只需要算出其他容器的宽度,然后换算出来的就是设备的高度减去其他容器的总高度。
建议放在config.js这个公共文件里,调用的时候引入全局调用
例如
config.rem(400,(res)=>{
this.setData({
scrollV:res
})
})
得到的这个scrollV就是已经兼容和适配好的scroll-view的高度。最后的单位是px。
感谢大家阅读,谢谢大家,我是小九。做自己喜欢做的事。