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

}

相关推荐
No丶slovenly5 分钟前
flutter笔记-输入框
前端·笔记·flutter
国产化创客34 分钟前
ESP32+Web实现智能气象站
前端·物联网·智能家居·智能硬件
coderYYY1 小时前
VSCode终端启动报错
前端·ide·vscode·npm·编辑器
西门吹-禅2 小时前
文本搜索node js--meilisearch
开发语言·javascript·ecmascript
tod1132 小时前
Redis 数据类型与 C++ 客户端实践指南(redis-plus-plus)
前端·c++·redis·bootstrap·html
Sylvia33.2 小时前
火星数据:棒球数据API
java·前端·人工智能
weixin199701080162 小时前
1688商品详情页前端性能优化实战
前端·性能优化
DEMO派3 小时前
前端常用XSS攻击演示与防御方案解析
前端·xss
问今域中3 小时前
Vue的computed用法解析
前端·javascript·vue.js
扶苏10023 小时前
详解Vue3的provide和inject
前端·javascript·vue.js