当前位置:   article > 正文

uniapp搞定了iPad适配分享_uniapp ipad

uniapp ipad

uniapp获取元素宽高

有时候适配屏幕很头疼,但是不得不解决适配问题,很多手机、平板各个屏幕的尺寸都不一样。而且使用upx、rpx都可能适配的不是很好,比如:ios使用flex布局,在iPad上就有问题,会下沉,布局和想象的不一样,所以要计算当前的元素高度来调整:

错误的布局:

布局出现错误
很明显本来是在底部导航栏上面的,可是到了导航栏下面了

解决

将布局分成底部导航栏和上面的布局分成两个子布局
获取到布局的高:

设置元素的id

<view id="bodyContainer" class="body">
.body {
		height: 100%;
		width: 100%;
		background-color: #888586;
		flex-direction: column;
	}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

获取元素的高度

const height = document.getElementById(‘bodyContainer’).clientHeight;

减去底部导航栏的高度

let rpx80 = uni.upx2px(80);
this.offHeight = (query - rpx80*2)+'px';(必须乘以2,不知道什么原因)
  • 1
  • 2

设置动态样式

<view class="body-swiper" :style="{height:offHeight}">
  • 1

底部导航栏

	.footer {
		position: fixed;
		bottom: 0;
		height: 80rpx;
		width: 100%;
		color: aquamarine;
		background-color: #888586;
		}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

最终的效果:
正确的布局
一个小白,请指正!

声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop】
推荐阅读
相关标签
  

闽ICP备14008679号