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

}

相关推荐
鹏多多几秒前
前端复制功能的高效解决方案:copy-to-clipboard详解
前端·javascript
AryaNimbus2 分钟前
你不知道的 Cursor系列(三):再也不用死记硬背 Linux 命令,终端 Cmd+K 来帮你!
前端·ai编程·cursor
uhakadotcom4 分钟前
Rollup 从0到1:TypeScript打包完全指南
前端·javascript·面试
Mintopia10 分钟前
实时语音转写 + AIGC:Web 端智能交互的技术链路
前端·javascript·aigc
2503_9284115612 分钟前
9.15 ES6-变量-常量-块级作用域-解构赋值-箭头函数
前端·javascript·es6
Pedantic13 分钟前
SwiftUI ShareLink – 显示分享表单的使用
前端
2501_9159184117 分钟前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
徐小夕18 分钟前
花了一天时间,开源了一套精美且支持复杂操作的表格编辑器tablejs
前端·算法·github
Mintopia19 分钟前
Next.js 单元测试究竟该选 JTest 还是 Vitest?
前端·javascript·next.js
Alice-YUE20 分钟前
【CSS学习笔记3】css特性
前端·css·笔记·html