实现方式
<template>
<scroll-view class="org-container" scroll-y enhanced :show-scrollbar="false">
<view class="com-status-bar" :style="{ 'height': statusBarHeight + 'px' }"></view>
<view class="com-container" :style="{ 'padding-top': statusBarHeight + 'px' }">
<view class="" v-for="i of 100">
<view class="test">测试{{i}}</view>
</view>
</view>
</scroll-view>
</template>
<script setup>
import {
ref
} from 'vue';
const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
console.log(statusBarHeight);
</script>
<style lang="scss">
// 取消滚动条
.org-container {
height: 100vh;
overflow: auto;
}
.com-container {
background-color: #fff;
width: 100%;
min-height: 100vh;
box-sizing: border-box;
padding: 4rpx 32rpx 88rpx 32rpx;
}
// 公用状态栏
.com-status-bar {
background-color: #fff;
width: 100%;
position: fixed;
top: 0;
}
</style>