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

}

相关推荐
费曼学习法2 分钟前
Vue 响应式系统源码级剖析:从 Object.defineProperty 到 Proxy
javascript·vue.js
前端那点事2 分钟前
Vue十万条数据渲染无卡顿!3种工业级方案(附可复制代码+避坑指南)
前端·vue.js
神奇小汤圆18 分钟前
快手一面:为什么要求用Static来修饰ThreadLocal变量?
javascript
tenggouwa18 分钟前
16GB Mac 同时开 3 个 Cursor 拯救我的mac
前端·后端
天天打码22 分钟前
从 Rolldown 到 Oxc:前端工具链正在全面 Rust 化
开发语言·前端·rust
zubylon22 分钟前
前端 RAG:把文档检索接到聊天页
前端·人工智能·算法
行业研究员27 分钟前
HTML头部元信息避坑指南大纲
javascript
犹豫的果冻布丁29 分钟前
OpenSpec 完全中文教程:AI 规范驱动开发入门与实战
前端·后端
Beginner x_u29 分钟前
前端八股整理总索引|JS/TS、HTML/CSS、Vue、浏览器、工程化与手写题
前端·javascript·html
Cobyte36 分钟前
10.响应式系统演进:通过位运算优化动态依赖收集(Vue3.2)
前端·javascript·vue.js