小程序获取元素的高度--记录一下

小程序总会有一些要求是需要剩余部分全部都占据掉剩余的高度，这样的话就延伸为需要知道你所写的上部空间占据了多少的高度，这个内容如果是不定高度，怎么办呢？？？？

首先自定义一个函数来获取你想获取的元素的各类信息

/** * 获取元素的各类信息 * @param {id} 为当前元素的class | id */

export const getViewInfo = (id) => {

return new Promise((resolve, reject) => {

try {wx.createSelectorQuery().select(id).boundingClientRect(res => {resolve(res)}).exec()

}catch (err) {

reject(err)

}

})}  

接着在需要的页面中引入并获取当前设备的可视高度

import { getViewInfo} from '../../utils/util.js'

//计算下边容器的高度

getViewInfo('#top-banner').then(res => {

//获取元素的高度

let resHeight = res.height

wx.getSystemInfo({

success: function(res) {

//计算可视高度 减 元素高度  TIP 记得减去元素的padding&margin的高度

that.data.scrollHeigt = res.windowHeight - resHeight - 36.5

that.setData({ scrollHeigt: that.data.scrollHeigt })

}

})

}) 

最后将获取的高度绑定到你需要的元素上面阔以啦！