拾光记录
218个文档 导航 作者 Gitee
随笔记录4
Hexo博客:基础使用Hexo博客:Next主题Hexo博客:Next进阶使用Hexo博客:Next高级配置
前端知识4
基础知识17
Vue框架19
UniApp14
微信小程序1
Java编程6
Java基础15
SpringBoot31
SpringMVC18
MyBatis9
SpringCloud15
中间件2
数据库4
MySQL13
Redis8
MongoDB10
其他数据库1
Python编程6
Python基础知识Python语法yolo目标检测OpenCV的使用及树莓派平台condauv管理工具
Linux12
Linux常用命令Jar启动脚本VirtualBox安装CentOSVirtualBox安装Ubuntu树莓派安装及使用frp内网穿透ArchLinux:基础系统安装ArchLInux:图形化界面安装ArchLinux:常用软件ArchLinux:深度优化ArchLinux:NiriArchLinux:模块记录
软件工具12
IDEAGitMavenGradleNginx安装Nginx配置JMeter压测OllamaRustFSPicGoVSCodeDocker
创意设计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>
实现方式