logo 范 · 拾光录
网址收集 关于作者 Github Gitee
杂文随笔4
Hexo博客:基础使用Hexo博客:Next主题Hexo博客:Next进阶使用Hexo博客:Next高级配置
前端编程3
前端基础知识16
UniApp15
Vue框架19
Java编程7
Java基础知识14
SpringBoot31
SpringMVC14
MyBatis8
SpringCloud15
RocketMQ1
MyCat1
数据库4
MySQL6
Redis7
MongoDB10
H21
Java技术栈4
知识整理分布式锁的实现方案MySQL事务MySQL的锁
软件工具箱14
IDEAGitMavenGradleNginx安装Nginx配置JMeter压测OllamaPicGoRustFSVSCodeDockerObsidianObs录制
Linux知识11
树莓派安装及使用ArchLinux:常用软件ArchLinux:基础系统安装ArchLinux:深度优化ArchLInux:图形化界面安装ArchLinux:Nirifrp内网穿透Jar启动脚本Linux常用命令VirtualBox安装CentOSVirtualBox安装Ubuntu
Python编程6
Python基础知识Python语法yolo目标检测OpenCV的使用及树莓派平台condauv
创意设计2
Blender:入门知识UI设计基础知识
AI相关9
Claude CodeHermes AgentOpenAI基本使用OpenAI工具调用OpenAI记忆管理OpenAI推理执行OpenAI开发框架Langchainllama.cpp

实现方式

<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; // 单位:px
  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>
实现方式