uni-app获取屏幕、元素的宽高位置信息_uni-app教程,flutter教程,apicloud教程_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

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

一、uni-app获取屏幕宽高信息：

`1`	`uni.getSystemInfo(OBJECT)`

详解：
screenWidth 屏幕宽度
screenHeight 屏幕高度
windowWidth 可使用窗口宽度
windowHeight 可使用窗口高度
windowTop 可使用窗口的顶部位置 App、H5
windowBottom 可使用窗口的底部位置 App、H5
statusBarHeight 状态栏的高

案例：

01onLoad() {
02    uni.getSystemInfo({
03        success: function (res) {
04            console.log(res.model);
05            console.log(res.pixelRatio);
06            console.log(res.windowWidth);
07            console.log(res.windowHeight);
08            console.log(res.language);
09            console.log(res.version);
10            console.log(res.platform);
11        }
12    });
13},

二、uni-app获取元素的宽度、高度、定位等：

`1`	`boundingClientRect`

获取到的信息：
bottom、dataset、proto、height、id、left、right、top、width

示例：

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

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

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

猜你喜欢