NutUI 的 Popup 组件为什么在 iOS 上滑动卡顿？
我在项目里用 NutUI 的 Popup 做了一个从底部弹出的选择面板，安卓上很流畅，但在 iPhone 上滑动的时候明显卡顿，甚至有时候整个页面都跟着抖。试过加 -webkit-overflow-scrolling: touch 也没用，是不是我哪里配置错了？
这是我的组件用法：
<nut-popup v-model:visible="showPicker" position="bottom">
<div class="picker-content">
<div v-for="item in options" :key="item.id">{{ item.label }}</div>
</div>
</nut-popup>2 条解答
首先，虽然你已经尝试了
-webkit-overflow-scrolling: touch，但确保它应用在正确的元素上是关键。这个样式应该加在需要滚动的内容容器上，而不是 Popup 的根元素。你可以在你的picker-content类上添加这个样式。接下来，我们检查一下 CSS 和结构是否合理。一个常见的问题是，iOS 上的滚动性能会受到
position: fixed或者复杂的 CSS 动画的影响。确保你的picker-content没有使用position: fixed，并且动画效果尽量简单。再者，如果
options列表非常长，渲染性能也会受到影响。可以考虑使用虚拟滚动（virtual scrolling）技术来优化渲染性能。虚拟滚动只渲染可视区域内的内容，减少 DOM 元素的数量，从而提高滚动性能。最后，有时候 iOS 上的卡顿也可能是由于 JavaScript 事件监听器过多导致的。确保你的事件监听器没有内存泄漏，并且不必要的事件监听器已经被移除。
基于以上分析，以下是改进后的代码示例：
注意，上述代码中的虚拟滚动实现是非常基础的示例，实际使用时可能需要根据具体情况进行调整。希望这些建议能帮助你解决 iOS 上的滑动卡顿问题。如果问题依旧存在，可能需要进一步检查其他可能导致性能下降的因素。
关键点：内容容器要设固定高度 + overflow-y: auto + -webkit-overflow-scrolling: touch，三者缺一不可。安卓不用最后那个属性，但 iOS 必须加。