微信小程序真机问题

安卓：

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;
   }
   

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

   苹果官方提供了两个 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>