【uniapp】根据盒子高度来设置界面高度

自认为通过获取盒子高度和手机高度来设置盒子box的高度着实有点不太高明,后面有更好的方法回来补充

uni.getSystemInfo() 获取手机系统信息

uni.createSelectorQuery() 获取节点信息,需搭配使用,

官网文档uni.createSelectorQuery() | uni-app官网 (dcloud.io)

getMenuButtonBoundingClientRect() 这个是小程序胶囊位置信息api,一起放在这好了

<template>
	<view class="box" :style="{height: fullScreen?'90vh':''}">
	  <view class="con">
		  <view class="giftCard" v-for="(item,index) in list" :key="index">
		    <!-- v-for遍历列表内容 -->
		  </view>

          <!-- 需要将foot放置到屏幕最下方 -->
		  <view class="foot">
		  	温馨提示：如有疑问请致电 4007-750-750
		  </view>
	  </view>
	</view>
</template>

async onShow() {
    //初始化list内容
	this.list = await GetUserCoupons(data)
	const userAcountInfo = await GetUserAcountInfo(data)
	await this.isShow(userAcountInfo)
    //等待list内容初始化结束之后在获取con盒子高度
	this.getPhoneInfo()
},
methods: {
	//获取手机高度和con盒子高度并且设置
	getPhoneInfo() {
		uni.getSystemInfo({
			success: res => {
				this.phoneHeight = res.screenHeight //手机高度
			}
		})
		const query = uni.createSelectorQuery().in(this);
		query.select('.con').boundingClientRect(data => {
			this.realHeight = data.height //盒子con高度
			console.log(data)
			//通过手机高度和盒子高度来判断页面是否全屏显示
			if (this.phoneHeight > this.realHeight) {
				this.fullScreen = true
			}
		}).exec()
	}
}

--------------上面的方法太蠢了

css样式有个最小高度

设置min-height: 100vh就可以了