uniapp获取元素宽高
有时候适配屏幕很头疼,但是不得不解决适配问题,很多手机、平板各个屏幕的尺寸都不一样。而且使用upx、rpx都可能适配的不是很好,比如:ios使用flex布局,在iPad上就有问题,会下沉,布局和想象的不一样,所以要计算当前的元素高度来调整:
错误的布局:
很明显本来是在底部导航栏上面的,可是到了导航栏下面了
解决
将布局分成底部导航栏和上面的布局分成两个子布局
获取到布局的高:
设置元素的id
<view id="bodyContainer" class="body">
.body {
height: 100%;
width: 100%;
background-color: #888586;
flex-direction: column;
}
获取元素的高度
const height = document.getElementById(‘bodyContainer’).clientHeight;
减去底部导航栏的高度
let rpx80 = uni.upx2px(80);
this.offHeight = (query - rpx80*2)+'px';(必须乘以2,不知道什么原因)
设置动态样式
<view class="body-swiper" :style="{height:offHeight}">
底部导航栏
.footer {
position: fixed;
bottom: 0;
height: 80rpx;
width: 100%;
color: aquamarine;
background-color: #888586;
}
最终的效果:
一个小白,请指正!