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

}

相关推荐
木子李BLOG10 分钟前
Element Plus
前端·javascript·vue.js
Miketutu16 分钟前
【大屏优化秘籍】Element UI El-Table 表格透明化与自定义行样式实战
前端·javascript·vue.js
止水编程 water_proof22 分钟前
JavaScript基础
开发语言·javascript·ecmascript
rainboy33 分钟前
Flutter :自己动手,封装一个小巧精致的气泡弹窗库
前端·flutter·github
合作小小程序员小小店1 小时前
web网页开发,在线%人力资源管理%系统,基于Idea,html,css,jQuery,java,jsp,ssh,mysql。
java·前端·css·数据库·mysql·html·intellij-idea
Ace_31750887761 小时前
拼多多商品详情接口深度解析:从加密参数破解到数据全量获取
前端·数据库·github
yuejich1 小时前
命名规范snake_case
服务器·前端·数据库
天平1 小时前
开发了几个app后,我在React Native用到的几个库的推荐
android·前端·react native
消失的旧时光-19431 小时前
Kotlinx.serialization 对多态对象(sealed class )支持更好用
java·服务器·前端
少卿2 小时前
React Compiler 完全指南:自动化性能优化的未来
前端·javascript