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

}

相关推荐
博客zhu虎康几秒前
uni-app云打包显示编译成功,但是一直没有进入打包队列,后面也一直没反应
uni-app
半旧5183 分钟前
【Java Web02】WEB服务器内部实现技术揭秘
java·服务器·前端
拿本唠嗑AI研究11 分钟前
现代前端架构爬虫指南:从静态页面到 React/Vue 单页应用
前端·爬虫·架构
独孤九剑打醒他29 分钟前
【原创开源】双层Master‑Worker软硬协同调度架构:从根源解决分布式数据一致性难题
前端·嵌入式硬件·架构·前端框架·硬件工程
程序员黑豆6 小时前
Java包装类:基本类型与对象的桥梁
java·前端·ai编程
bugcome_com9 小时前
JWT 知识小课堂:从入门到精通,一文吃透 JSON Web Token
前端·json
To_OC9 小时前
写了三天 Next.js,我的 React 世界观被拆了又装回去
前端·全栈·next.js
独泪了无痕9 小时前
viewer.js 安装与配置指南:实现图片预览功能
前端·vue.js
起床学FPGA11 小时前
AI回答问题之后,会自动跳到最下面的问题
开发语言·javascript·ecmascript
Fluxart.ai11 小时前
电商商品图审核怎么自动化?规则引擎、人工复核与发布门禁
java·前端·自动化