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

}

相关推荐
用户904706683571 分钟前
Nuxt 请求后端接口怎么写,一篇文章讲清楚
前端
ahubbub4 分钟前
用 maptalks 在 Web 上做可扩展的 2D/3D 地图渲染与交互
前端
JosieBook6 分钟前
【Vue】11 Vue技术——Vue 中的事件处理详解
前端·javascript·vue.js
韩曙亮8 分钟前
【jQuery】jQuery 简介 ( JavaScript 库简介 | jQuery 核心概念、特点 | jQuery 下载并使用 )
前端·javascript·jquery
一只小阿乐17 分钟前
vue 改变查询参数的值
前端·javascript·vue.js·路由·router·网文·未花中文网
Mintopia17 分钟前
😎 HTTP/2 中的 HPACK 压缩原理全揭秘
前端·人工智能·aigc
程序员爱钓鱼25 分钟前
Node.js 编程实战:即时聊天应用 —— WebSocket 实现实时通信
前端·后端·node.js
爱迪斯通33 分钟前
Xsens为拳击康复训练带来运动数据支持
前端
2501_9481226337 分钟前
React Native for OpenHarmony 实战:Steam 资讯 App 服务条款实现
javascript·react native·react.js·游戏·ecmascript·harmonyos
奚大野...42 分钟前
uni-app手机端项目touchmove禁止页面上下拉滑动
前端·javascript·uni-app