uniapp 高度铺满全屏

问题:在有uni-tabbar的情况下,页面铺满剩下的部分

php 复制代码
<template>
    <view :style="{height:screenHeight+'px'}" class="page">
    </view>
</template>
<script>
    export default {
        data() {
            return {
                screenHeight: "",
            }
        },
        onLoad() {
            this.screenHeight = uni.getSystemInfoSync().windowHeight;
        },
        methods: {
        }
    }
</script>

在uniapp中,高度使用heiht:100vh,h5的屏幕会多出一些高度,导致可以上下滑动

解决方式如下

在app.vue中设置一个公共样式

uni-page-body,html,body{

height: 100%;

}

在需要高度铺满全屏的页面的最外层的view绑定类名page,样式为

.page {

height: 100%;

}

相关推荐
邋遢道17 分钟前
# 企业级 Agent 从 0 到 1(二):技术选型与最小骨架
前端·chrome
计算机魔术师21 分钟前
我看了 OpenAI 首席科学家的最新长文,把原来的认知推翻了一遍
前端
乱码三千1 小时前
使用ComfyUI+MinMax-H3音视频模型生成视频
前端·后端·github
Coder_Ke1 小时前
代码我都定位了,Codex 还在考古:于是我写了个 VS Code 插件
前端
LiaCode2 小时前
别让 AI 把仓库写成“代码平行宇宙”:从 Deslop 看生成前查重
前端·后端·github
nice先生的狂想曲2 小时前
javascript高级程序设计(六)——2026.9.5
前端·javascript
我爱写代码i2 小时前
SKAPP SK影视反编译详细教程+源码 含苹果端ipa
开发语言·javascript·ecmascript
光影少年2 小时前
如何做大型React+RN 项目架构设计、目录规范
前端·react native·react.js
一位正在转型AI全栈的前端工程师3 小时前
AI 全栈学习之旅 -Week 8:从单 Agent 到多 Agent 协作:LangGraph 实战与记忆持久化
前端·python
用户921080262863 小时前
Promise 和 async/await:从用途到执行机制
前端