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%;

}

相关推荐
hzxpaipai19 分钟前
企业官网技术架构拆解:前端、后台、数据库、服务器如何协同
前端·数据库·架构
小磊哥er31 分钟前
深入解构Claude Code - 第 12 篇 · 整体串起来
javascript·ai编程
小磊哥er32 分钟前
深入解构Claude Code - 第 11 篇 · 工程上的讲究
javascript·ai编程
深念Y2 小时前
Lenovo XiaoXinAir 14 — 性能模式切换
前端·网络
计算机魔术师3 小时前
Meta突然杀进第一梯队:一个新模型,把AI推理成本打下来8倍
前端
lhldsg3 小时前
智慧场馆解决方案小程序开发实战:从架构设计到部署指南
java·小程序·uni-app
IT_陈寒3 小时前
Redis缓存雪崩把我坑惨了,这次长记性了
前端·人工智能·后端
风骏时光牛马3 小时前
提示词工程:大模型效能挖掘与指令设计实战
前端
仓三3 小时前
Chrome DevTools MCP 上手:让 Coding Agent 自己调试前端页面
前端·chrome devtools·mcp