小程序 Input 抖动问题：揭开背后的原因

引言

在小程序开发中，Vant 是一个流行的 UI 组件库，而 Dialog 和 input 组件是其中使用频率较高的组件。然而，一些开发者在使用这两个组件时遇到了一系列问题，其中一个典型问题就是 input 组件的 placeholder 抖动。

问题

当使用 Vant 的 Dialog 组件弹出包含 input 组件的对话框时，input 组件的 placeholder 会出现抖动，即初始位置偏上，然后抖动到正确的位置上。

原因分析

经过深入分析，我们发现导致抖动的原因在于 Vant 的 Dialog 组件和 input 组件的 DOM 结构。Dialog 组件在弹出时，会动态创建 input 组件的 DOM 元素。由于 input 组件的 placeholder 是通过 CSS 实现的，因此在 DOM 元素刚创建时，placeholder 会根据 CSS 样式初始定位。

但是，Dialog 组件在弹出后会对 input 组件进行一些操作，比如设置焦点或调整位置，这些操作会触发 input 组件的重新渲染。在重新渲染过程中，input 组件的 placeholder 会根据新的 DOM 结构重新定位，导致抖动。

解决方案

1. 使用 placeholder 属性

一种简单的方法是使用 input 组件的 placeholder 属性，直接在 HTML 中设置 placeholder，而不是通过 CSS 实现。这样，placeholder 将在 DOM 创建时就固定位置，不会因为重新渲染而抖动。

<van-dialog>
  <input placeholder="请输入"></input>
</van-dialog>

2. 修改 CSS 样式

另一个方法是修改 Vant 的 CSS 样式，让 input 组件的 placeholder 在刚创建时就处于正确的位置。可以这样做：

.van-dialog .van-input-placeholder {
  transform: translate(0, 0);
}

这个样式将强制 input 组件的 placeholder 在一开始就位于正确的位置，防止抖动。

3. 使用第三方组件

如果你使用的是第三方组件，比如 Vant，并且遇到 placeholder 抖动问题，你可以尝试使用其他第三方组件，比如 TaroUI 或 WeUI，看看它们是否也有同样的问题。

4. 调整组件顺序

在某些情况下，调整组件的顺序可以解决抖动问题。例如，可以将 input 组件放在 Dialog 组件之前，让 input 组件先渲染出来。

<van-dialog>
  <input></input>
</van-dialog>

总结

Vant Dialog 组件和 input 组件的 placeholder 抖动问题是由组件的 DOM 结构和渲染顺序造成的。通过使用 placeholder 属性、修改 CSS 样式或调整组件顺序，开发者可以轻松解决这个恼人的 bug，让小程序中的 input 组件正常工作。