在uniapp中如果要适配各种不同大小的屏幕的高度,那么就得动态设置元素的高度,比如我们写的一个滚动列表,那么滚动列表的长度不能给他固定住,因为有的屏幕的比例相对要高一些,所以这个list就要改成动态的
onLoad() {
//我们在onload钩子中获取到屏幕可用的高度
//然后减去其他元素的所占的高度总和,那么获取的的就是你要动态设置的元素的高度
//也就实现了自适应的效果
			this.h=uni.getSystemInfoSync().windowHeight-uni.upx2px(810);
		}

uni.upx2px(810);这里用到了这个方法,这个是uni提供的将rpx转换成px的方法,因为之前获取到的可用的屏幕高度是px的单位,所以设置的时候要统一成px的格式

//这里是动态给list元素设置height,将onload中获取的this.h赋值给height
<list class="scroller" :style="'height:'+this.h+'px'"></list>
//或者写成这种方式的
<list class="scroller" :style="'{height:h}"></list>

‘h’在data中的写法

data() {
			return {
			    //对应第一种不用加px
				h:null,
				color:'green',
				//对应第二种在设置的时候吧px加上,切记是字符串的格式
				h:'300px'
			}

具体getSystemInfoSync和getSystemInfo的用法可以参考uniapp开发文档,以上就实现了动态设置元素高度的方法了;

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐