ios微信小程序 Ios微信小程序最小化

安卓：

scroll-view 滚动到底部有时候不触发滚动事件（2022.01.25）：

IOS 滚动到底部滚动条还能往上拉一段距离，因此不存在这个问题。

解决方法：如果是想监听 bindscrolltolower 事件，可以通过将 lower-threshold 的数值设置得大一些；如果是想监听 bindscroll 事件，暂时没有解决方法。

IOS：

scroll- view 的最后一个子元素设置 margin-bottom 无效（2022.01.25）：

解决方法：使用 padding-bottom 替代 margin-bottom 。

给 page 设置背景色，下拉或者上拉页面，页面会出现一块白色区域（橡皮筋效果）：

解决方法：可以在 app.json 或者 page.json 中设置 backgroundColor/backgroundColorTop/backgroundColorBottom。

安全距离兼容问题：

iPhone X 之后的苹果机型都需要注意安全区域的问题。安全区域距离上下左右都有一段安全距离。

例如：如果不处理 IOS 底部安全距离兼容的问题，那么 iPhone X 之后的苹果机型将会出现底部操作栏被底部横条遮挡的问题。

解决方法：

1. 可以通过微信小程序提供的 wx.getSystemInfo() 来获取整个屏幕的高度和安全区域底部的纵坐标，然后计算出安全区域距离底部边界的距离，借助计算出的这个值设置下内边距，将这段距离撑开。

这种方式需要先获取高度，然后计算，最后再赋值，比较繁琐。

// 自定义固定在页面底部的操作栏组件
// 此处 padding-bottom 中的 +30 是自己编写的默认内边距样式
<view class="container" style="padding-bottom: {{safeAreaInsetBottom + 30}}rpx">
  <view class="action-bar">
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
  </view>
</view>

Component({
  data: {
    safeAreaInsetBottom: 30,
  },
  pageLifetimes: {
    show() {
      wx.getSystemInfo({
        success: (res) => {
          // 使用屏幕高度减去安全区域底部的纵坐标，得到安全区域距离底部边界的距离
          const safeAreaInsetBottom = res.screenHeight - res.safeArea.bottom
          this.setData({safeAreaInsetBottom})
        }
      })
    }
  },
})

.container {
  width: 100%;
  padding: 30rpx;
  box-sizing: border-box;
  background: #fff;
  border-top: 2rpx solid #efefef;
  position: fixed;
  bottom: 0;
  z-index: 99;
}

.action-bar {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

1. 创建一个安全距离的自定义组件，通过苹果官方提供的函数来获取安全距离，撑开自定义组件，在需要的地方引入放置这个自定义组件即可。

苹果官方提供了两个 CSS 函数：constant() （兼容 IOS < 11.2）和 env() （兼容 IOS >= 11.2）用于获取安全区域与边界的距离。推荐使用。
有 4 个预定义变量：

• safe-area-inset-left：安全区域距离左边边界的距离。
• safe-area-inset-right：安全区域距离右边边界的距离。
• safe-area-inset-top：安全区域距离顶部边界的距离。
• safe-area-inset-bottom ：安全区域距离底部边界的距离。

// 自定义安全距离组件
<view class="safe-distance-{{direction}}"></view>

Component({
 properties: {
   direction: String,
 },
})

.safe-distance-top {
 width: 100%;
 padding-top: constant(safe-area-inset-top);
 padding-top: env(safe-area-inset-top);
}

.safe-distance-bottom {
 width: 100%;
 padding-bottom: constant(safe-area-inset-bottom);
 padding-bottom: env(safe-area-inset-bottom);
}

.safe-distance-left {
 width: 100%;
 padding-left: constant(safe-area-inset-left);
 padding-left: env(safe-area-inset-left);
}

.safe-distance-right {
 width: 100%;
 padding-right: constant(safe-area-inset-right);
 padding-right: env(safe-area-inset-right);
}

.safe-distance-all {
 width: 100%;
 padding-top: constant(safe-area-inset-top);
 padding-top: env(safe-area-inset-top);
 padding-bottom: constant(safe-area-inset-bottom);
 padding-bottom: env(safe-area-inset-bottom);
 padding-left: constant(safe-area-inset-left);
 padding-left: env(safe-area-inset-left);
 padding-right: constant(safe-area-inset-right);
 padding-right: env(safe-area-inset-right);
}

// 在固定在页面底部的操作栏组件中使用自定义安全距离组件
<view class="container">
 <view class="action-bar">
   <button>按钮1</button>
   <button>按钮2</button>
   <button>按钮3</button>
 </view>
 <safe-dsitance direction='bottom'></safe-dsitance>
</view>