uni-app有两个方法,可以方便的获取屏幕和元素的宽高位置信息(获取元素宽高位置时,一定要等元素渲染完,否则会得不到):
一、uni-app获取屏幕宽高信息:
1 | uni.getSystemInfo(OBJECT) |
详解:
screenWidth 屏幕宽度
screenHeight 屏幕高度
windowWidth 可使用窗口宽度
windowHeight 可使用窗口高度
windowTop 可使用窗口的顶部位置 App、H5
windowBottom 可使用窗口的底部位置 App、H5
statusBarHeight 状态栏的高
案例:
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); |
二、uni-app获取元素的宽度、高度、定位等:
获取到的信息:
bottom、dataset、proto、height、id、left、right、top、width
示例:
1 | let obj = uni.createSelectorQuery().select( '.类名' ) |
2 | obj.boundingClientRect( function (data) { |
3 | console.log( "得到布局位置信息" + JSON.stringify(data)); |
4 | console.log( "节点离页面顶部的距离为" + data.top); |
部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!