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

}

相关推荐
wuhen_n1 分钟前
Vite 构建层面的图片优化:从压缩到转换
前端·javascript·vue.js
hashiqimiya2 分钟前
vue项目组装-路由-文件修改地方
前端·javascript·vue.js
回到原点的码农13 分钟前
TypeScript 与后端开发Node.js
javascript·typescript·node.js
Mike_jia14 分钟前
ChatClaw:5 分钟打造你的个人 AI 智能体
前端
CodeSheep15 分钟前
王自如公开招聘01号员工,这要求有多离谱?
前端·后端·程序员
亿元程序员20 分钟前
“我要验牌”很火吗?我特意写了个Shader去验...
前端
@yanyu66623 分钟前
04vue3基础
前端·javascript·vue.js
IT_陈寒30 分钟前
JavaScript 闭包陷阱:90%开发者踩过的5个坑,你中招了吗?
前端·人工智能·后端
SuperEugene36 分钟前
Vue3 Props 传参实战规范:必传校验 + 默认值 + 类型标注,避开 undefined / 类型混用坑|Vue 组件与模板规范篇
前端·javascript·vue.js·前端框架
吴声子夜歌37 分钟前
JavaScript——数组
java·javascript·算法