uni-app mui的PopPicker和DtPicker组件在IOS17.1后选项偏移的问题

产品分类：
其他/MUI

操作步骤：



### 预期结果：

实际结果：


### bug描述：
在IOS16版本时，采用https://ask.dcloud.net.cn/article/40363和https://ask.dcloud.net.cn/article/40418的方法解决显示错乱后。  
系统更新到**IOS17.1**的时候DtPicker又出现了显示偏移的问题  

![](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20231207/7f5c0a0be956cc92a44df6bd2c757aa4.gif)

eggper 1楼•10 天前

在 uni-app 中使用 mui 的 PopPicker 和 DtPicker 组件时，如果在 iOS 17.1 及更高版本中出现选项偏移的问题，可能是由于 iOS 系统更新导致的样式或布局兼容性问题。以下是一些可能的解决方案和排查步骤：

1. 检查样式兼容性

iOS 17.1 可能对某些 CSS 样式或布局行为进行了调整，导致 PopPicker 和 DtPicker 的选项位置偏移。可以尝试以下方法：

检查组件的外层容器样式，确保没有使用 position: fixed 或 transform 等可能导致布局异常的属性。
确保组件的 z-index 设置正确，避免被其他元素遮挡。
使用 flex 布局或 grid 布局来确保选项的位置正确。

2. 更新组件版本

如果 mui 或 uni-app 的版本较旧，可能存在与 iOS 17.1 的兼容性问题。尝试更新到最新版本：

更新 mui 组件库。
更新 uni-app 框架到最新版本。

3. 使用原生 Picker 替代

如果问题无法解决，可以考虑使用原生 picker 组件替代 PopPicker 和 DtPicker。uni-app 提供了原生 picker 组件，兼容性更好：

<picker mode="selector" :range="options" @change="handlePickerChange">
  <view>选择选项</view>
</picker>

4. 动态调整布局

在 iOS 17.1 中，某些布局行为可能发生了变化。可以尝试在组件的 mounted 或 updated 生命周期中动态调整布局：

mounted() {
  this.$nextTick(() => {
    const picker = this.$refs.picker;
    if (picker) {
      // 动态调整布局
      picker.style.top = '50%';
      picker.style.left = '50%';
      picker.style.transform = 'translate(-50%, -50%)';
    }
  });
}

5. 使用条件编译

针对 iOS 17.1 及以上版本，可以使用条件编译来应用特定的样式或逻辑：

<template>
  <view>
    <!-- 通用布局 -->
    <view class="picker-container">
      <PopPicker v-if="!isIOS17_1" />
      <picker v-else mode="selector" :range="options" @change="handlePickerChange" />
    </view>
  </view>
</template>

<script>
export default {
  computed: {
    isIOS17_1() {
      const system = uni.getSystemInfoSync();
      return system.platform === 'ios' && system.system >= '17.1';
    }
  }
};
</script>