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

}

相关推荐
远山枫谷5 分钟前
一文理清页面/组件通信与 Store 全局状态管理
前端·微信小程序
codingWhat5 分钟前
手撸一个「能打」的 React Table 组件
前端·javascript·react.js
进击的尘埃5 分钟前
用 TypeScript 的 infer 搓一个类型安全的深层路径访问工具
javascript
HelloReader6 分钟前
Tauri 应用安全从开发到发布的威胁防御指南
前端
bluceli6 分钟前
WebAssembly实战指南:将高性能计算带入浏览器
前端·webassembly
yuki_uix7 分钟前
Object.entries:优雅处理 Object 的瑞士军刀
前端·javascript
Lee川8 分钟前
JavaScript 面向对象编程全景指南:从原始字面量到原型链的终极进化
javascript·面试
奇迹_h4 小时前
打造你的HTML5打地鼠游戏:零基础入门实践
前端
SuperEugene4 小时前
Vue生态精选篇:Element Plus 的“企业后台常用组件”用法扫盲
前端·vue.js·面试
Neptune14 小时前
JavaScript回归基本功之---类型判断--typeof篇
前端·javascript·面试