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

}

相关推荐
牧艺4 分钟前
登录页还在用渐变?我一口气做了 5 个能摸的背景动效:吹蒲公英、滴墨染水、点熔岩闷裂
前端·canvas·交互设计
陆枫Larry5 分钟前
状态机简介
前端
陆枫Larry37 分钟前
一次登录问题排查:接口没错,错的是旧业务逻辑
前端
小小小小宇43 分钟前
大模型打分与采样原理,以及 Pi Agent 核心原理
前端
一位正在转型AI全栈的前端工程师1 小时前
AI 全栈学习之旅 -Week 5:RAG 知识库问答系统:从零到生产级部署的全栈实践总结
前端·python
光影少年1 小时前
react navite 安卓iOS 打包、签名、环境区分
前端·react native·react.js
coderCN2 小时前
Nodejs 第三十四章 数据库(表达式和函数、子查询和连表)
前端·node.js
ssshooter2 小时前
AI 时代你不能不知道的 git worktree
前端·后端·面试
观测云3 小时前
AI时代的用户访问监测:观测云带你身临其境体验用户与前端UI交互旅程
前端·可观测性·观测云·rum
喵本喵叁肆3 小时前
06-M6-部门过滤与综合研判-从问答机到研判助手
前端·javascript·jquery