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

}

相关推荐
weixin_4434785110 分钟前
flutter学习之状态管理相关组件
javascript·学习·flutter
掘金安东尼34 分钟前
⏰前端周刊第 456 期(v2026.3.15)
前端·javascript·面试
还是大剑师兰特34 分钟前
Vue3 通用可复用动态插槽组件(终极版)
前端·javascript·vue.js
专科3年的修炼41 分钟前
uni-app移动应用开发
uni-app
nibabaoo44 分钟前
前端开发攻略---在 Vue 3 项目中使用 vue-i18n 实现国际化多语言
前端·javascript·国际化·i18n·vue3
qq_437100661 小时前
ElasticSearch相关记录
大数据·前端·javascript·elasticsearch·全文检索
CHU7290351 小时前
剧本杀组车约玩小程序前端功能版块设计及玩法介绍
前端·小程序
清空mega1 小时前
《Vue3 模板进阶:class/style 绑定、事件对象、修饰符、表单处理与高频易错点》
前端·javascript·vue.js
还是大剑师兰特1 小时前
Vue3 插槽完整实战(具名插槽 + 动态插槽)
前端·javascript·vue.js
fei_sun1 小时前
Vue+SpingBoot+MyBaits框架
前端·javascript·vue.js