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

}

相关推荐
zs宝来了3 分钟前
微前端架构:qiankun 沙箱隔离与样式冲突
前端·javascript·框架
M ? A19 分钟前
Vue 的 scoped 样式穿透 React 不支持?用 VuReact 编译就行
前端·javascript·vue.js·react.js·面试·开源·vureact
zs宝来了21 分钟前
Vue 3 Composition API:响应式系统与依赖追踪
前端·javascript·框架
李伟_Li慢慢25 分钟前
wolfram详解山峦算法
前端·算法
村上小树35 分钟前
非常简单地学习一下slate.js的原理
前端·javascript
web打印社区38 分钟前
[特殊字符] 开源好物:web-print-pdf,让 Web 打印像调用接口一样简单!
前端·javascript·vue.js·electron
嗷o嗷o41 分钟前
Android BLE 收到字节流以后,为什么业务状态还是不对
前端
莪_幻尘44 分钟前
Prompt 工程化落地:从"手工咒语"到工业级软件系统
前端
荒天帝1 小时前
Android App 最强APM来袭
前端
vim怎么退出1 小时前
我给 Claude Code 写了一个自适应学习 Skill,7 天刷完浏览器原理
前端·人工智能