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

}

相关推荐
weipt几秒前
springboot项目运行的几种方式
javascript·css·html
前端技术官5 分钟前
前端真的比后端简单吗?
javascript·webview·dom·前端工程化·浏览器兼容性
vx-程序开发12 分钟前
【java项目分享】springboot农产品销售平台14952
java·javascript·spring boot·python·eclipse·django·php
贾天佑忆月 迷失的昵13 分钟前
.NET Web开发技术简单整理
前端·.net
Cobyte34 分钟前
Vite & Rollup 插件开发实践
前端·javascript·vue.js
朝阳3935 分钟前
react19【系列实用教程】实用组件封装
开发语言·前端·javascript
IT_陈寒39 分钟前
React的useEffect依赖数组把我坑惨了,原来这样写才靠谱
前端·人工智能·后端
恋猫de小郭39 分钟前
Flutter hit,一个可以灵活控制溢出点击的第三方包
android·前端·flutter
古韵44 分钟前
小程序上传进度条,还要自己监听 onProgressUpdate 吗?
前端·javascript·uni-app
古韵1 小时前
axios 已经跑得好好的,还要不要上 alova?
前端·javascript·axios