前言

• 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 填充剩余高度的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。