前言

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

嘗試 Flex 布局的flex-grow屬性

flex-grow屬性定義項(xiàng)目的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大。

我以為能夠縱向放大。經(jīng)過(guò)實(shí)驗(yàn)和網(wǎng)上查找，該屬性是橫向放大（計(jì)算剩余寬度，不能計(jì)算剩余高度）。

這個(gè)不行就換一個(gè)。

手工計(jì)算高度

定義高度變量

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

計(jì)算高度

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><!-- 滾動(dòng)列表 --><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();}});}, }

說(shuō)明：剩余高度 = 屏幕高度 - 控件".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

總結(jié)

以上是生活随笔為你收集整理的uniapp 填充剩余高度的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。