admin 管理员组

文章数量: 1087748

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

版权声明：本文标题：uniapp中的view高度设置100% 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1694401924a251635.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。