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 分钟前
【前端转全栈java速通课】 项目实战④12-14节 拦截器过滤器和全局配置-cors跨域设置-token体系-利用session做验证码
java·开发语言·前端·ai·容器
VimorphTech5 分钟前
转写结果怎么生成双语字幕?TypeScript 实现 SRT、WebVTT 与索引匹配
javascript·音视频开发
代码猎人6 分钟前
怎么开发一个微信小程序
前端
console.log('npc')9 分钟前
第 3 章 工程化与项目初始化
前端·人工智能·大模型
掘金者阿豪14 分钟前
数据集成软件不能只看“同步成功”:聊聊金仓 KFS 和订单数据同步这件事
前端·后端
风骏时光牛马16 分钟前
Navicat Premium 18 自动续试用天数
前端
hunterandroid33 分钟前
HarmonyOS HUKS 密钥全生命周期实战:生成、轮换与失效处理
前端·华为
damoluomu35 分钟前
SSG 的后台怎么补:Node.js 生态里的三条路(番外二)
javascript·css·typescript·node.js·html
东鹏特饮42 分钟前
贪吃蛇小游戏html
前端·javascript·html
溪语流沙44 分钟前
【每天一个CSS | Day23】边框上有一道光在跑的流光呼吸卡片
前端·css