小程序全面屏适配

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：

  .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

关于height:100%和height:100vh的区别

vh就是当前屏幕可见高度的1%，也就是说

height:100vh == height:100%;

但是当元素没有内容时候，设置height:100%，该元素不会被撑开，此时高度为0，

但是设置height:100vh，该元素会被撑开屏幕高度一致。