首页 > 建站教程 > APP开发,混合APP >  uni-app获取屏幕、元素的宽高位置信息正文

uni-app获取屏幕、元素的宽高位置信息

uni-app有两个方法,可以方便的获取屏幕和元素的宽高位置信息(获取元素宽高位置时,一定要等元素渲染完,否则会得不到):

一、uni-app获取屏幕宽高信息:
uni.getSystemInfo(OBJECT)
详解:
screenWidth 屏幕宽度
screenHeight 屏幕高度
windowWidth 可使用窗口宽度
windowHeight 可使用窗口高度
windowTop 可使用窗口的顶部位置 App、H5
windowBottom 可使用窗口的底部位置 App、H5
statusBarHeight 状态栏的高

案例:
onLoad() {
    uni.getSystemInfo({
        success: function (res) {
            console.log(res.model);
            console.log(res.pixelRatio);
            console.log(res.windowWidth);
            console.log(res.windowHeight);
            console.log(res.language);
            console.log(res.version);
            console.log(res.platform);
        }
    });
},
二、uni-app获取元素的宽度、高度、定位等:
boundingClientRect
获取到的信息:
bottom、dataset、proto、height、id、left、right、top、width

示例:
let obj = uni.createSelectorQuery().select('.类名')
obj.boundingClientRect(function (data) { // data - 各种参数
    console.log("得到布局位置信息" + JSON.stringify(data));
    console.log("节点离页面顶部的距离为" + data.top);
}).exec()