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

}

相关推荐
Tkto2 分钟前
我用 WebGL 从「画个点」一路画到「贪吃蛇」
前端
xiaobaoyu9 分钟前
前端代码常用规范
前端
xiaobaoyu17 分钟前
img,word,excel,pdf文件在线预览
前端
lichenyang45318 分钟前
从 H5 到 HarmonyOS:我做了一个 npm + OHPM 双端发布的 ArkWeb JSBridge 框架
前端
用户842981424181018 分钟前
AI时代,JS混淆加密还有用吗?
前端·javascript
xiaobaoyu22 分钟前
如何理解前端项目中的绝对路径和相对路径
前端
xiaobaoyu26 分钟前
vue3+vite+vant4项目实战总结
前端
咖啡星人k40 分钟前
【无标题】
前端·ai·github
颜进强1 小时前
LangChain 从入门到实践:用最小案例理解 RAG 的 5 个核心抽象
前端·后端·ai编程
颜进强1 小时前
MCP 从入门到实践:用 TypeScript 实现第一个 MCP Server
前端·后端·ai编程