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

}

相关推荐
chilavert318几秒前
技术演进中的开发沉思-276 AJax : Menu
javascript·ajax·交互
debug 小菜鸟几秒前
搭建web 环境的那些事
前端
鹏多多2 分钟前
Flutter下拉刷新上拉加载侧拉刷新插件:easy_refresh全面使用指南
android·前端·ios
Mike_jia15 分钟前
OpenDeRisk:AI 原生风险智能系统 ——7*24H 应用系统AI数字运维助手(AI-SRE)
前端
朱穆朗24 分钟前
electron升级到33.0.x版本后,devtools字体的修改方法
前端·javascript·electron
2501_9444522330 分钟前
智能洞察 Cordova 与 OpenHarmony 混合开发实战
javascript
IT_陈寒33 分钟前
Java 21新特性实战:5个必学的性能优化技巧让你的应用提速40%
前端·人工智能·后端
Irene199137 分钟前
insertAdjacentHTML() 详解
javascript·dom
HarrySunCn37 分钟前
大夏龙雀DX-CT511N-B实战之路-第1步
前端·单片机·物联网·iot
未来之窗软件服务1 小时前
幽冥大陆(七十七)C# 调用 中文huayan-medium.onnx —东方仙盟练气期
前端·ui·c#·仙盟创梦ide·东方仙盟