短視訊商城系統，scroll-view如何自適應頁面剩餘高度

短視訊商城系統，scroll-view如何自適應頁面剩餘高度

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

給標籤新增行內樣式：

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

但這種方法需要使用js計算不太簡便，可以使用flex佈局，將主軸設為y軸，隨後指定另外兩個元件的高度，scroll-view區域使用flex:1高度自適應即可。需要注意的是除了自適應區域以外的元素一定要指定高度，如果沒有確定的高度可以指定相對高度。還有就是page是小程式預設包裹在最外層的標籤，也要指定高度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如何自適應頁面剩餘高度， 更多內容歡迎關注之後的文章