73 lines
1.5 KiB
Vue
73 lines
1.5 KiB
Vue
|
<template>
|
||
|
|
<view class="message-container">
|
||
|
|
<!-- 固定背景的容器 -->
|
||
|
|
<view class="background-container"></view>
|
||
|
|
|
||
|
|
<!-- 可滚动的内容区域 -->
|
||
|
|
<view class="content-container" :style="'height:'+height+'px'">
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<Tabbar id="tabbarId"></Tabbar>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref, computed, getCurrentInstance } from 'vue';
|
||
|
|
import {
|
||
|
|
onReady
|
||
|
|
} from '@dcloudio/uni-app';
|
||
|
|
import { onReady as onUniReady } from '@dcloudio/uni-app';
|
||
|
|
const instance = getCurrentInstance();
|
||
|
|
|
||
|
|
const height = ref(0)
|
||
|
|
|
||
|
|
const loadHeight = () => {
|
||
|
|
uni.getSystemInfo({
|
||
|
|
success(res) {
|
||
|
|
let screenHeight = res.screenHeight
|
||
|
|
uni.createSelectorQuery().in(instance.proxy).select("#tabbarId").boundingClientRect((data : any) => {
|
||
|
|
height.value = screenHeight - data.height
|
||
|
|
}).exec()
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
onUniReady(() => {
|
||
|
|
loadHeight()
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.message-container {
|
||
|
|
width: 100%;
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
height: 100%;
|
||
|
|
overflow: hidden;
|
||
|
|
/* 防止容器本身滚动 */
|
||
|
|
|
||
|
|
/* 固定背景 */
|
||
|
|
.background-container {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background: linear-gradient(180deg, #2F75F9 0%, #F0F3FF 34.13%);
|
||
|
|
z-index: 1;
|
||
|
|
/* 确保背景在内容下方 */
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 内容滚动区域 */
|
||
|
|
.content-container {
|
||
|
|
position: relative;
|
||
|
|
z-index: 2;
|
||
|
|
/* 确保内容在背景上方 */
|
||
|
|
width: 100%;
|
||
|
|
overflow-y: scroll;
|
||
|
|
height: 100%;
|
||
|
|
padding: 32rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|