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

}

相关推荐
Hyyy3 分钟前
requestAnimationFrame和setTimeout有什么不同
前端
Jackson__33 分钟前
问到你想清楚,这个 skill 专治没想明白就写代码!
前端·github·ai编程
এ慕ོ冬℘゜34 分钟前
前端实战:Textarea 实时字数计数输入器(带字数限制+UI优化完整源码)
前端·ui
程序员黑豆1 小时前
从零开始:创建第一个鸿蒙应用程序
前端·harmonyos
只与明月听2 小时前
LangChain 学习-掌握LangChain Core API
前端·人工智能·后端
Listen·Rain2 小时前
Vue3中组件间通信详解
前端·javascript·vue.js
Listen·Rain2 小时前
Vue3中customRef详解
前端·javascript·vue.js
香芋芋圆2 小时前
国内常用坐标系全解析与WebGIS框架实战指南(Cesium/Mapbox/Leaflet避坑手册)
前端·javascript
sugar__salt2 小时前
Document 切割:RAG 知识库数据预处理实战
javascript·langchain·embedding·js·rag·cheerio
小粉粉hhh2 小时前
React(三)——Redux
前端·javascript·react.js