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

}

相关推荐
明远湖之鱼12 小时前
浅入理解跨端渲染:从零实现 React DSL 跨端渲染机制
前端·react native·react.js
2501_9160074712 小时前
iOS文件管理工具深度剖析,从系统沙盒到跨平台文件操作的多工具协同实践
android·macos·ios·小程序·uni-app·cocoa·iphone
shykevin12 小时前
uni-app x开发商城系统,扩展组件uni-ui实现底部商品导航
uni-app
悟忧12 小时前
规避ProseMirror React渲染差异带来的BUG
前端
小皮虾12 小时前
小程序云开发有类似 uniCloud 云对象的方案吗?有的兄弟,有的!
前端·javascript·小程序·云开发
QuantumLeap丶12 小时前
《uni-app跨平台开发完全指南》- 05 - 基础组件使用
vue.js·微信小程序·uni-app
Android疑难杂症12 小时前
鸿蒙Notification Kit通知服务开发快速指南
android·前端·harmonyos
T___T12 小时前
全方位解释 JavaScript 执行机制(从底层到实战)
前端·面试
阳懿12 小时前
meta-llama-3-8B下载失败解决。
前端·javascript·html
Qinana12 小时前
🌊 深入理解 CSS:从选择器到层叠的艺术
前端·css·程序员