<template>
<view class="indexBox">
<status-bar title="点餐" :showBack="true" :bgColorFff="false" class="home-data"></status-bar>
<view class="bottomIos" style="background-color: grey;height: 100vh;">
<view class="" style="height: 100rpx;background: darkred;">
测试1111
</view>
<view class="" style="background-color: bisque;" :style="{ height: fillHeight + 'px' }">
中间高度
</view>
<view class="bottomIosMargin" style="height: 100rpx;background: darkred;">
测试测试333
</view>
</view>
</view>
</template>
<script>
export default {
components: {
},
data() {
return {
description: '点餐主页',
clientHeight: '',
fillHeight: '',
}
},
// 侦听器
watch: {
},
// 计算属性
computed: {
},
//组件创建
created() {
},
// 页面加载
onLoad(e) {
// 获取组件高度
// let view = uni.createSelectorQuery().select(".home-data");
// view.boundingClientRect(data=>{
// this.clientHeight = data.height;
// }).exec();
let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
uni.getSystemInfo({
//获取系统信息
success: res => {
let navHeight = menuButtonObject.height + (menuButtonObject.top - res.statusBarHeight) *
2; //导航栏高度=菜单按钮高度+（菜单按钮与顶部距离-状态栏高度）*2
this.titleBarHeight = navHeight;
this.statusBarHeight = res.statusBarHeight;
console.log(this.titleBarHeight, this.statusBarHeight)
},
fail(err) {
console.log(err);
}
})
let view = uni.createSelectorQuery().select(".home-data");
view.boundingClientRect(data => {
this.clientHeight = data.height;
console.log(this.clientHeight, '头部组件高度')
uni.getSystemInfo({
success: (res) => {
const res1 = uni.getSystemInfoSync();
const system = res1.osName;
console.log(res1, 'systemsystem')
if (system === 'ios') {
this.fillHeight = res.windowHeight - this.getClientHeight() - 100 - this
.clientHeight - 20;
} else if (system === 'android') {
this.fillHeight = res.windowHeight - this.getClientHeight() - 100 - this
.clientHeight;
}
console.log(this.fillHeight, '高度')
}
});
}).exec();
},
// 页面显示
onShow() {
},
// 方法
methods: {
// 获取可视区域高度[兼容]
getClientHeight() {
const res = uni.getSystemInfoSync();
const system = res.platform;
if (system === 'ios') {
return 0 + res.statusBarHeight;
} else if (system === 'android') {
return 0 + res.statusBarHeight;
} else {
return 0;
}
}
},
// 页面隐藏
onHide() {
},
// 页面卸载
onUnload() {
},
// 触发下拉刷新
onPullDownRefresh() {
},
// 页面上拉触底事件的处理函数
onReachBottom() {
},
}
</script>
<style lang="scss" scoped>
.indexBox {
height: 100vh;
// overflow: hidden;
background-color:
}
</style>
获取组件和可视屏幕区域高度：https://www.jianshu.com/p/1dbdc0d77ab0
uniapp小程序获取状态栏高度和自定义导航栏：http://events.jianshu.io/p/1eb20247ef22
<template>
<view class="indexBox">
<status-bar title="送券" :showBack="true" :bgColorFff="false" class="home-data"></status-bar>
<view class="bottomIosMargin" style="background-color: #DF0629;height: 100vh;">
<view class="mainBox" :style="{ height: fillHeight + 'px' }">
中间高度
</view>
</view>
</view>
</template>
<script>
export default {
components: {
},
data() {
return {
description: '送券列表-送券详情',
clientHeight: '',
fillHeight: '',
}
},
// 侦听器
watch: {
},
// 计算属性
computed: {
},
//组件创建
created() {
},
// 页面加载
onLoad(e) {
// 获取组件高度
// let view = uni.createSelectorQuery().select(".home-data");
// view.boundingClientRect(data=>{
// this.clientHeight = data.height;
// }).exec();
let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
uni.getSystemInfo({
//获取系统信息
success: res => {
let navHeight = menuButtonObject.height + (menuButtonObject.top - res.statusBarHeight) *
2; //导航栏高度=菜单按钮高度+（菜单按钮与顶部距离-状态栏高度）*2
this.titleBarHeight = navHeight;
this.statusBarHeight = res.statusBarHeight;
console.log(this.titleBarHeight, this.statusBarHeight)
},
fail(err) {
console.log(err);
}
})
let view = uni.createSelectorQuery().select(".home-data");
view.boundingClientRect(data => {
this.clientHeight = data.height;
console.log(this.clientHeight, '头部组件高度')
uni.getSystemInfo({
success: (res) => {
const res1 = uni.getSystemInfoSync();
const system = res1.osName;
console.log(res1, 'systemsystem')
if (system === 'ios') {
console.log('ios')
this.fillHeight = res.windowHeight - this.getClientHeight() - this
.clientHeight - 40;
} else if (system === 'android') {
console.log('android')
this.fillHeight = res.windowHeight - this.getClientHeight() - this
.clientHeight - 20;
}
console.log(this.fillHeight, '高度')
}
});
}).exec();
},
// 页面显示
onShow() {
},
// 方法
methods: {
// 获取可视区域高度[兼容]
getClientHeight() {
const res = uni.getSystemInfoSync();
const system = res.platform;
if (system === 'ios') {
return 0 + res.statusBarHeight;
} else if (system === 'android') {
return 0 + res.statusBarHeight;
} else {
return 0;
}
}
},
// 页面隐藏
onHide() {
},
// 页面卸载
onUnload() {
},
// 触发下拉刷新
onPullDownRefresh() {
},
// 页面上拉触底事件的处理函数
onReachBottom() {
},
}
</script>
<style lang="scss" scoped>
.indexBox {
height: 100vh;
overflow: hidden;
background-color:
.mainBox {
width: 690rpx;
// height: calc(100vh - 40px);
margin-left: 30rpx;
margin-right: 30rpx;
background-image: url('../static/img/bg.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
}
</style>