微信小程序使用scss适配iPhone底部横线

可定义如下的@mixin方法：

/* iPhone 底部横线适配 */
@mixin iphoneAdaptive($name, $n:0px) {
  @if($name==p) {
    /* 可以通过增加padding-bottom来适配 */
    padding-bottom: calc(#{$n} + constant(safe-area-inset-bottom));
    /*兼容 IOS<11.2*/
    padding-bottom: calc(#{$n} + env(safe-area-inset-bottom));
    /*兼容 IOS>11.2*/
  }

  @else if($name==m) {
    /* 可以通过margin-bottom来适配 */
    margin-bottom: calc(#{$n} + constant(safe-area-inset-bottom));
    margin-bottom: calc(#{$n} + env(safe-area-inset-bottom));
  }

  @else if($name==h) {
    /* 可以通过height来适配 */
    height: calc(#{$n} + constant(safe-area-inset-bottom));
    height: calc(#{$n} + env(safe-area-inset-bottom));
  }
}

在页面中使用

/**先引入定义上述方法的scss文件**/
@import "../../assets/css/mixin.scss";

.container {
	/* 使用@include方法 */
	@include iphoneAdaptive(p, 100rpx);
	overflow-y: auto;
	height: 100vh;
}

整个mixin.scss文件代码如下：

/* flex 水平布局 */
@mixin rflex($justify: center, $align: center) {
  display: flex;
  flex-direction: row;
  align-items: $align;
  justify-content: $justify;
}

/* flex 垂直布局 */
@mixin cflex($justify: center, $align: center) {
  display: flex;
  flex-direction: column;
  align-items: $align;
  justify-content: $justify;
}

/* iPhone 底部横线适配 */
@mixin iphoneAdaptive($name, $n:0px) {
  @if($name==p) {
    /* 可以通过增加padding-bottom来适配 */
    padding-bottom: calc(#{$n} + constant(safe-area-inset-bottom));
    /*兼容 IOS<11.2*/
    padding-bottom: calc(#{$n} + env(safe-area-inset-bottom));
    /*兼容 IOS>11.2*/
  }

  @else if($name==m) {
    /* 可以通过margin-bottom来适配 */
    margin-bottom: calc(#{$n} + constant(safe-area-inset-bottom));
    margin-bottom: calc(#{$n} + env(safe-area-inset-bottom));
  }

  @else if($name==h) {
    /* 可以通过height来适配 */
    height: calc(#{$n} + constant(safe-area-inset-bottom));
    height: calc(#{$n} + env(safe-area-inset-bottom));
  }
}

/* 一行文字溢出隐藏 */
@mixin textEllipse() {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 多行文字溢出隐藏 */
@mixin textEllipses($lines: 2) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
}

// 1px细线
@mixin thinLine($color: $themeColor, $width: 100%) {
  background-color: $color;
  width: $width;
  height: 1px;
  transform: scaleY(0.5);
}