uniapp中的view高度设置100%

1、在APP.vue文件添加如下代码

<script>export default {data() {return {globalData: {},}},onLaunch: function() {console.log('App Launch')uni.getSystemInfo({ //设置屏幕高度success: res => {//减去tabbar的高度，默认为50pxthis.globalData.screenHeight = res.screenHeight;this.globalData.screenWidth = res.screenWidth;}})},onShow: function() {console.log('App Show')},onHide: function() {console.log('App Hide')}}
</script><style lang="scss">/*每个页面公共css */@import "@/uni_modules/uview-ui/index.scss";
</style>

2、在组件中设置页面高度

<template><view><view class="barClass" :style="'height:'+screenHeight+'px'">左分页</view><view style="width: 70%;float: left;">右分页</view></view></template><script>export default {data() {return {screenHeight: getApp().globalData.screenHeight}},onShow() {plus.screen.lockOrientation('landscape-primary');plus.navigator.setFullscreen(true)},onUnload() {plus.screen.lockOrientation('portrait-primary')plus.navigator.setFullscreen(false)},methods: {}}
</script><style lang="scss" scoped>.barClass {width: 30%;float: left;background-color: #000000;}
</style>

uniapp中的view高度设置100%相关推荐

uni-app 学习：页面高度设置100%
uni-app 中页面默认没有100%,内容只显示一半,而且轮播图随内容区域一起滚动,不能固定,如下图所示: 在独立页面给page加高度100%, 此时h5页面正常但是在小程序中依旧是不起作用的,如下 ...
uniapp中实现swiper高度自适应 - vue3
1. 使用 uni.createSelectorQuery() 获取节点信息 2. 使用 uni.getSystemInfo() 获取当前可使用窗口高度 3. 使用 v-bind 动态修改 swipe ...
div高度设置100%无效的问题（亲身实践）
先上我的项目效果图: 这是没有加高度的这是加了高度的今天写页面碰到了一个问题,div设置高度100%无效,于是进行检查.首先想到的是div父容器没有高度,于是检查父容器高度,通过谷歌开发者工具发 ...
uni-app中背景图片的设置
html部分 <view class="center_model_content"><view class=""><image c ...
uni-app中同一个页面如何设置多个弹出层（弹框）
uni-app前端项目开发中,在使用uni-popup弹出层组件时,通常同一个页面要用到多个弹出层.提示窗口.提示框等等.那么怎么样注册多个弹出层而不冲突呢? 下面我以注册两个弹出层为例来说一下,注册 ...
uni-app - 设置最外层容器高度为100%
在小程序中设置page的页面高度为100%只需要在app.wxss中设置 page {height: 100%; } 即可,但是在uniapp中,想要设置page的页面高度为100%就需要在App. ...
使用js将div高度设置为一直保持100%
在开发的工程中使用到了一些开源的bootstrap模板进行开发,在遇到一些需要替换的内容部分部分时,经常出现高度设置100%无法生效的问题,这里来用js强行设置一下. 思路:js监听窗口的缩放 ...
html给div设置宽度无效,HTML学习之给div高度设置百分比不生效的问题
这几天在学习HTML的知识,今天想做一个极为简单的页面,就是分为头部,内容和底部,本来用三个div即可,可是给div高度设置百分比时发现不生效,具体页面如下,非常简单. 下面是html部分: 1111 ...
关于父元素设置maxHeight或minHeight，子元素高度设置%的不生效的问题
关于父元素设置maxHeight或minHeight,子元素高度设置%的不生效的问题要理解这个问题,首先要搞清楚一个元素的高度是由什么决定的?如果在不额外设置高度或者行高等外加的影响高度的css样式 ...

uniapp中的view高度设置100%

uniapp中的view高度设置100%相关推荐

最新文章

热门文章