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()

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！