uniapp动态设置元素的高度
在uniapp中如果要适配各种不同大小的屏幕的高度,那么就得动态设置元素的高度,比如我们写的一个滚动列表,那么滚动列表的长度不能给他固定住,因为有的屏幕的比例相对要高一些,所以这个list就要改成动态的onLoad() {//我们在onload钩子中获取到屏幕可用的高度//然后减去其他元素的所占的高度总和,那么获取的的就是你要动态设置的元素的高度//也就实现了自适应的效果this.h=uni.ge
·
在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开发文档,以上就实现了动态设置元素高度的方法了;
更多推荐
已为社区贡献3条内容
所有评论(0)