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

}

相关推荐
AI周红伟9 分钟前
Agent Skills生产级Skills 案例实操-周红伟
前端·chrome·react.js·langchain
Java编程爱好者16 分钟前
Spring AI 1.0 实战:从原理到落地的完整指南
javascript
用户862841295494417 分钟前
Flutter rxflare 响应式进阶:Map/List 精准字段更新(高性能实战)
前端·flutter
路光.18 分钟前
uniapp小程序/App使用webview打通麦克风权限实现录音功能
小程序·uni-app·app
横木沉18 分钟前
高并发场景下的前端缓存与降级策略
大数据·前端·缓存
我命由我1234527 分钟前
VSCode - VSCode 自定义折叠区域
前端·javascript·ide·vscode·前端框架·编辑器·js
cc.ChenLy32 分钟前
Lottie-Web 技术指南:让动画开发更简单高效
前端
bug总结36 分钟前
前端流程图vueflow
前端·流程图
清水白石00838 分钟前
Python 数据建模指南:dataclass、TypedDict 与 Pydantic 的选型博弈
前端·javascript·python
xiaoyan201539 分钟前
全新首发uniapp+deepseek-v4三端通用智能ai助手
uni-app·ai编程·deepseek