小程序全面屏適配

basic.less(全局樣式)中:

page {

  // height: 100%; // 不要加 height: 100%;

  padding-bottom: constant(safe-area-inset-bottom); // 適配全面屏

  padding-bottom: env(safe-area-inset-bottom);

}

// 如果頁面底部有固定button,高度為120rpx,加此下代碼

.has-button-padding {

  padding-bottom: 120rpx !important;

}

頁面底部button組件bottomButton:

<view class="bottomButton"></view>
  .bottomButton {

    position: fixed;

    bottom: 0;

    width: 100%;

    height: 120rpx;

    padding-bottom: constant(safe-area-inset-bottom);

    padding-bottom: env(safe-area-inset-bottom);

  }

如果頁面內容不限制高度,則正常添加如上適配就行。如果限制一屏高度,如下圖:

CE9CEB8E-B626-4A9A-B7C0-DBDA5B7E5313.png
<div class="crm-other-container has-button-padding">

  <van-tree-select items="{{ infoItems }}" main-active-index="{{ mainActiveIndex }}" active-id="{{ activeId }}"          bind:clicknav="onClickNav" bind:clickitem="onClickItem" />

  <bottomButton btnArr="{{ btnArr }}" />

  <van-toast id="van-toast" />

</div>
<style lang="less">

  .crm-other-container {

    box-sizing: border-box;

    height: 100%;

  .van-tree-select {

    height: calc(100vh - 120rpx - constant(safe-area-inset-bottom)) !important;

    height: calc(100vh - 120rpx - env(safe-area-inset-bottom)) !important;

    overflow-y: auto; // 屬性規定是否對內容的上/下邊緣進行裁剪 - 如果溢出元素內容區域的話,則提供滾動機制

  }

}
</style>
關于height:100%和height:100vh的區別

vh就是當前屏幕可見高度的1%,也就是說

height:100vh == height:100%;

但是當元素沒有內容時候,設置height:100%,該元素不會被撐開,此時高度為0,

但是設置height:100vh,該元素會被撐開屏幕高度一致。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容