小程序全面屏适配

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，该元素会被撑开屏幕高度一致。