前言

Hbuilder X 2.7.14.20200618 （不清楚uniapp的版本，用工具版本代替）
需求，如下图：

尝试 Flex 布局的flex-grow属性

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

我以为能够纵向放大。经过实验和网上查找，该属性是横向放大（计算剩余宽度，不能计算剩余高度）。

这个不行就换一个。

手工计算高度

定义高度变量

export default {data() {return {newsPanelHeight: 0,}}
}

计算高度

export default {data() {return {newsPanelHeight: 0,}},onReady(){var _this = this;uni.getSystemInfo({success: function (res) {_this.newsPanelHeight = res.windowHeight - 200;}});},
}

绑定style

<template><view class="content"><!-- 顶部轮播 --><uni-swiper-dot>...</uni-swiper-dot><!-- 滚动列表 --><view class="newsScrollContainer" :style="{ height: newsPanelHeight + 'px' }"><scroll-view class="newsScroll" scroll-y="true">...</scroll-view></view></view>
</template>

遇到不固定高度怎么办？

export default {data() {return {newsPanelHeight: 0,}},onReady(){var _this = this;uni.getSystemInfo({success: function (res) {uni.createSelectorQuery().select(".newsScrollContainer").boundingClientRect(function(boundRect){_this.newsPanelHeight = res.windowHeight - boundRect.top;}).exec();}});},
}

说明：剩余高度 = 屏幕高度 - 控件".newsScrollContainer"的top值

参考

https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
https://blog.csdn.net/qq_26766789/article/details/76890311
https://blog.csdn.net/weixin_39793790/article/details/105397875
https://uniapp.dcloud.io/use?id=class-%E4%B8%8E-style-%E7%BB%91%E5%AE%9A
https://uniapp.dcloud.io/api/system/info?id=getsysteminfo

uniapp 填充剩余高度相关推荐

html div剩下高度设置,使div填充剩余屏幕空间的高度
使用flexbox,您可以轻松地在具有固定尺寸,内容大小尺寸或剩余空间尺寸的任何行或列之间切换.在我的示例中,我已将标题设置为与其内容对齐(根据OPs问题),我添加了一个页脚以显示如何添加固定高度区域 ...
CSS实现div填满剩余高度
需求: nav和content盒子的高度和浏览器高度相同,且不能出现纵向滚动条绿色盒子高度固定,比如:50px 紫色盒子填充剩余的高度 BODY部分的代码: 方式一:绝对定位方式二:box-siz ...
背景平铺两栏自适应（占满剩余高度）fastclick、IScroll双飞翼布局
文章目录背景平铺两栏自适应(占满剩余高度) 需求实现 fastclick插件的使用 IScroll插件的使用(实现区域滚动效果) 条件双飞翼布局(两边固定宽度,中间自适应) 条件实现背景平 ...
css div填满剩余高度
<div class="father"><div class="child1"></div><div class=&q ...
如何使div填充剩余的水平空间？
我有2个div:在页面的左侧是一个,在右侧是一个. 左侧的一个宽度固定,我希望右侧的一个填充剩余空间. #search { width: 160px; height: 25px; float: lef ...
html填满剩余空间,html – 标题,两侧填充剩余空间
我被要求创建这个标题,纯粹用css,它甚至可能吗? 文本的背景需要保持透明,h2需要跨越任何容器的宽度,并且左右边框自动填充剩余空间. h2 { font-size:42px; line-height ...
如何将div高度填满剩余高度
下列代码中navbar高度为30px,content高度需要填满浏览器的剩余高度 <div id="body"> <div id="navbar&quo ...
一个div分上下两部分，上部分高度不固定，下面部分自动填满剩余高度
div自动填满剩余高度 html <div class="wrapper" style="height:800px;"><div class= ...
itextpdf计算table高度，判断PDF剩余高度实现换页添加
在写PDF的时候你可能会遇到这种场景: 需要添加的table为一个整体,不能被拆分在两个PDF页中展示这时候就需要先判断剩余的空白高度能否放下table的高度,否则换页添加已使用高度计算: pub ...

uniapp 填充剩余高度

前言

尝试 Flex 布局的flex-grow属性

手工计算高度

遇到不固定高度怎么办？

参考

uniapp 填充剩余高度相关推荐

最新文章

热门文章