在uni-app使用中，有如下場(chǎng)景，頁(yè)面有三個(gè)組件，top-bar頂部標(biāo)題欄高度指定，bottom-bar底部功能菜單欄高度指定，scroll-view區(qū)域是一個(gè)scroll-view滾動(dòng)區(qū)域，瀏覽聊天內(nèi)容。要求scroll-view在這兩個(gè)組件之間正常顯示。

查閱官方文檔，文檔要求使用豎向滾動(dòng)時(shí)，需要給?<scroll-view>?一個(gè)固定高度，但這個(gè)高度無(wú)法直接確定；?

首先想到的方法是通過計(jì)算得出scroll-view的高度，使用100vh即視口高度，減去上下兩個(gè)組件和手機(jī)狀態(tài)欄的高度，得到剩余的高度即scroll-view的高度。

onLoad(options){uni.getSystemInfo({success: (res) => {// 獲取手機(jī)狀態(tài)欄高度this.statusBarHeight = res.statusBarHeight;this.scrollviewHeight = `calc(100vh - 98rpx - 110rpx - ${this.statusBarHeight}px)`;}}); }

給標(biāo)簽添加行內(nèi)樣式：

<scroll-view class="chat-main" scroll-y="true" :scroll-into-view="scrollToView":scroll-with-animation="needScrollAnimation"@scrolltoupper="debounce":style="{height:scrollviewHeight}"> </scroll-view>

但這種方法需要使用js計(jì)算不太簡(jiǎn)便，可以使用flex布局，將主軸設(shè)為y軸，隨后指定另外兩個(gè)組件的高度，scroll-view區(qū)域使用flex:1高度自適應(yīng)即可。需要注意的是除了自適應(yīng)區(qū)域以外的元素一定要指定高度，如果沒有確定的高度可以指定相對(duì)高度。還有就是page是小程序默認(rèn)包裹在最外層的標(biāo)簽，也要指定高度height:100%

<view class="box"> <top-bar class="box-head"></top-bar><scroll-view class="box-scroll"></scroll-view><bottom-bar class="box-bottom"></bottom-bar> </view>

page{height:100%; } .box {display: flex;flex-direction:column;height:100vh; /*高度必須指定 或者寫成100%*/overflow:hidden; } .box-head {flex-shrink: 0;height: 55px; } .box-scroll {flex: 1;overflow: scroll; /*必須寫這一條*/height: 1px; } .box-bottom {height:49px; }

參考：微信小程序中scroll-view高度自適應(yīng)問題怎么辦解決 - 開發(fā)技術(shù) - 億速云 (yisu.com)?

總結(jié)

以上是生活随笔為你收集整理的scroll-view如何自适应页面剩余高度的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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