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

}

相关推荐
郝亚军7 分钟前
如何安装webstorm、Node.js和vue CLI
前端·javascript·vue.js
IT_陈寒7 分钟前
React的useEffect依赖项把我坑惨了
前端·人工智能·后端
东方小月38 分钟前
从零开发一个Coding Agent:monorepo项目搭建
前端·后端·node.js
葬送的代码人生41 分钟前
别再让 AI 瞎写代码了!Vibe Coding 三步法教你写出靠谱代码
前端·设计模式·架构
Shirley~~42 分钟前
Code-Review-Graph:面向 AI 辅助代码审查的结构化上下文引擎
前端·ai编程
AI多Agent协作实战派1 小时前
AI多Agent协作系统实战(十七):凌晨4点,我的AI系统在“假装工作“——3个bug同时爆炸的5小时
java·前端·bug
qq_2518364571 小时前
基于java Web 动漫视频网站毕业论文
java·开发语言·前端
an317421 小时前
6MB 组织树大文件性能优化全流程
前端·javascript·vue.js
武子康2 小时前
Inkling 975B 说明“开放权重“与“普通开发者本地运行“已经分离,内容重点应是部署容量和运行时边界
前端·人工智能·后端
TeamDev2 小时前
JxBrowser 9.3.1 版本发布啦!
java·前端·javascript·c#·混合应用·jxbrowser·浏览器控件