uniapp使用 uni.createSelectorQuery()根据class名获取界面高度，但是获取的只是屏幕的高度并不是整个界面的高度
uniapp使用uni.createSelectorQuery()获取整个页面的高度，但是获取的只是当前屏幕的高度，不管里面内容多少
如下图是我的代码：
<template>
<div class="all">
<div class="all-title">
<div class="title-left" :class="!isShowTakeOut?'activity':''" @click="changeShowTakeOut(1)">送餐到桌</div>
<div class="title-right" :class="isShowTakeOut?'activity':''" @click="changeShowTakeOut(2)">打包带走</div>
<div class="title-center">
<block v-if="!isShowTakeOut">
<image src="../../static/image/ramadhin.png" class="ramadhin"></image>
<div class="ramadhin-text">桌台</div>
<image src="../../static/image/scan.png" class="ramadhin-right"></image>
</block>
<block v-if="isShowTakeOut">
<div class="take-meal">取餐时间:<picker class="picker" mode="time" :value="takeTime" start="09:01"
end="21:01" @change="bindTimeStart">
<view class="uni-input">{{ takeTime }}</view>
</picker>
</div>
</block>
</div>
</div>
<div class="all-center">
<div class="company-name">
{{companyName}}
</div>
<div class="order-list">
<div v-for="(item,index) in orderList" :key="index">
<div class="order-item">
<image :src="item.chooseImage" class="dish-image"></image>
<div class="dish-name">{{item.chooseName}}</div>
<div class="dish-taste">口味：{{item.dishTaste}}</div>
<div class="choose-price"> ￥{{item.choosePrice}}元</div>
<div class="choose-number">{{item.chooseNumber}}</div>
</div>
</div>
<div class="order-subtotal"> 共计：<text style="color:#E43D33;">{{totalPrice}}元</text>
</div>
</div>
</div>
<div class="order-coupon">
<div class="coupon-text">
优惠券:
<div class="coupon-name">{{coupon}}</div>
<image src="../../static/image/arrow.png" class="coupon-image" @click="chooseCoupon"></image>
</div>
<!-- <div class="coupon-text">
积分:
<image src="../../static/image/arrow.png" class="coupon-image"></image>
</div> -->
</div>
<div class="order-message">
<text class="message-text">留言：</text>
<textarea @blur="getMessage" class="message-item"></textarea>
</div>
<div class="dividing"></div>
<div class="all-bottom">
<div>
共计：<text style="color:#E43D33;">{{payAmount}}元</text>
</div>
<div @click="insertOrderByWx">提交订单</div>
</div>
</div>
</template>
<script>
import {insertOrder } from '../../api/dishOrder.js'
export default {
data() {
return {
orderList: {},
totalPrice: 0,
totalNumber: 0,
takeTime: '14:00', //取餐时间
companyName: '',
currentHeigh: '',
couponPrice:0,
coupon:'',
payAmount:0,
message: '',
isShowTakeOut: false,
}
},
onShow:function() {
this.orderList = uni.getStorageSync("currentOrderList")
this.totalPrice = uni.getStorageSync("totalPrice")
this.totalNumber = uni.getStorageSync("totalNumber")
this.companyName = uni.getStorageSync("companyName")
let couponName = uni.getStorageSync("couponName")
let couponAmout = uni.getStorageSync("couponAmount")
if(couponName!=null&&couponName!=''){
this.coupon = couponName
}
if(couponAmout!=null&&couponAmout!=''){
this.couponPrice = couponAmout
}
this.payAmount = this.totalPrice-this.couponPrice
},
onLoad() {
},
onReady() {
const res = uni.getSystemInfoSync();
const query = uni.createSelectorQuery().in(this);
query.select('.all').boundingClientRect(data => {
)
if (res.windowHeight <= data.height) {
this.currentHeigh = data.height + 'px'
}
if (res.windowHeight > data.height) {
this.currentHeigh = res.windowHeight + 'px'
}
}).exec();
},
methods: {
changeShowTakeOut(value) {
if (value === 1) {
this.isShowTakeOut = false
}
if (value === 2) {
this.isShowTakeOut = true
}
},
insertOrderByWx(){
let id = uni.getStorageSync("openid")
let list ={
openid:id,
totalNumber:this.totalNumber,
totalAmount:this.totalPrice,
tableNumber:0,
couponAmount:this.couponPrice,
payAmount:this.payAmount,
orderInfoList:this.orderList
}
insertOrder(list).then((res1) => {
//成功结果
if(res1.data.openid!=null){
}
}).catch(err => {
//失败结果
});
},
// 开始时间
bindTimeStart: function(e) {
this.takeTime = e.target.value;
},
chooseCoupon() {
uni.navigateTo({
url:'../coupon/selectCoupon'
})
},
getMessage(e) {
},
}
}
</script>
<style>
.all {
background-color: #e0dddc;
position: absolute;
height: 100%;
}
.all-title {
width: 90%;
background-color: #eeeded;
margin-left: 5%;
height: 100px;
margin-top: 10px;
position: relative;
border-radius: 5px;
}
.title-left {
display: inline-block;
position: relative;
color: #b4b3b3;
float: left;
width: 50%;
text-align: center;
height: 35px;
top: 5px;
font-size: 22px;
}
.title-right {
display: inline-block;
position: relative;
color: #b4b3b3;
float: right;
width: 50%;
text-align: center;
height: 35px;
top: 5px;
font-size: 22px;
}
.activity {
background-color: #FFFFFF;
color: #76a6c8;
}
.title-center {
width: 100%;
background-color: #FFFFFF;
position: relative;
top: 35px;
height: 65px;
border-radius: 5px;
}
.ramadhin {
width: 25px;
height: 25px;
position: relative;
top: -25px;
left: 10px;
}
.ramadhin-text {
position: relative;
top: -30px;
left: 20px;
display: inline-block;
font-size: 20px;
color: #76a6c8;
}
.ramadhin-right {
width: 25px;
height: 25px;
position: relative;
top: -25px;
float: right;
margin-right: 10px;
}
.take-meal {
position: relative;
top: -20px;
left: 20px;
display: inline-block;
font-size: 20px;
}
.picker {
width: 40px;
height: 40px;
margin-left: 10px;
display: inline-block;
}
.all-center {
width: 90%;
left: 5%;
position: relative;
margin-top: 10px;
background-color: #FFFFFF;
border-radius: 5px;
}
.company-name {
margin-top: 10px;
margin-left: 10px;
margin-bottom: 20px;
font-size: 20px;
}
.dish-image {
width: 60px;
height: 60px;
margin-left: 10px;
}
.dish-name {
position: relative;
left: 80px;
top: -65px;
font-weight: 600;
font-size: 18px;
}
.dish-taste {
position: relative;
left: 80px;
top: -65px;
font-size: 15px;
}
.choose-number {
position: relative;
left: 80px;
top: -60px;
font-size: 15px;
}
.choose-price {
position: relative;
float: right;
right: 10px;
top: -85px;
font-size: 18px;
color: #E43D33;
}
.order-item {
width: 100%;
height: 80px;
}
.order-list {
width: 100%;
}
.order-subtotal {
position: relative;
top: -10px;
left: 10px;
font-size: 20px;
}
.all-bottom {
width: 90%;
height: 40px;
background-color: #FFFFFF;
border-radius: 5px;
position: absolute;
bottom: 0px;
left: 5%;
}
.order-message {
position: relative;
top: 15px;
height: 90px;
left: 5%;
width: 90%;
background-color: #FFFFFF;
border-radius: 5px;
margin-bottom: 40px;
}
.message-item {
width: 80%;
height: 60px;
background-color: #e0dddc;
left: 50px;
position: absolute;
top:15px;
}
.message-text {
position: relative;
top: 15px;
left: 5px;
}
.dividing {
width: 100%;
height: 1px;
color: #e0dddc;
margin-top: 40px;
position: relative;
}
.order-coupon{
width: 90%;
height: 60px;
position: relative;
background-color: #FFFFFF;
left: 5%;
margin-top: 10px;
}
.coupon-text{
margin-left: 10px;
position: relative;
width: 100%;
top: 10px;
}
.coupon-image{
width: 15px;
height: 15px;
position: absolute;
float: right;
right: 15px;
top: 3px;
}
.coupon-name{
display: inline-block;
color: #6A6A6A;
float: right;
position: absolute;
right: 40px;
}
</style>
效果如下图：
这个页面内使用了position进行定位，这个高度获取不到是因为这个吗
获取你 all 的高度
你all写了100%高度，你浏览器看一下all的高度是多少，有可能是他出现了滚动条。
你可以给内部再包一个元素，然后这个元素让内容撑开，再去获取这个元素的高度。