Cube UI 的 Picker 组件在 iOS 上滚动卡顿怎么办？

程序猿思涵提问于 2026-03-24 12:27:19 阅读 43

移动

我在用 Cube UI 做一个移动端项目，Picker 组件在安卓上滑动挺流畅的，但在 iOS 真机上特别卡，几乎没法用。试过加 -webkit-overflow-scrolling: touch 也没效果，是不是我哪里配置错了？

这是我的用法：

<cube-picker
  v-model="pickerVisible"
  :data="pickerData"
  @select="handleSelect">
</cube-picker>

Cube UI

我来解答赞 3 收藏

反馈

1 条解答

设计师红梅 Lv1

这个问题应该是 CSS 渲染的问题。-webkit-overflow-scrolling: touch 虽然加了但可能没生效，或者还有其他样式冲突。可以试试以下方法：

首先确保 -webkit-overflow-scrolling: touch 应用到了正确的元素上。有时候这个属性需要应用到具体的滚动容器，而不是父元素。

其次，检查是否有其他 CSS 样式影响了滚动性能，比如 position: fixed 或者 transform 属性，这些都可能导致滚动不流畅。

再者，可以尝试给滚动容器添加 will-change: transform; 和 backface-visibility: hidden; 来优化渲染。

最后，确保 pickerData 数据量不是特别大，大量数据也会导致性能下降。可以考虑分页加载或者虚拟列表技术。

如果以上方法都不奏效，可以尝试使用原生的 UIPickerView 来替代 Cube UI 的 Picker 组件，毕竟原生组件在性能上有天然优势。

关键代码示例：

.cube-picker-wheel-wrapper {

  -webkit-overflow-scrolling: touch;

  will-change: transform;

  backface-visibility: hidden;

}

希望这些建议能解决你的问题，效率更高才行。

2026-03-24 13:06