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

何以为皇

已于 2023-05-10 16:07:48 修改

阅读量679

点赞数 1

分类专栏：微信小程序文章标签：微信小程序 scss

于 2023-05-10 11:26:42 首次发布

本文链接：https://blog.csdn.net/qq_39352650/article/details/130597110

版权

微信小程序专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章介绍了如何使用SCSS的mixin方法来处理iPhone底部安全区域的适配问题，包括通过padding、margin和height的计算来适应不同场景。同时，提供了flex布局的mixin，以及处理单行和多行文字溢出隐藏的方法，还有创建1px细线的技巧。

摘要由CSDN通过智能技术生成

可定义如下的@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);
}