Form 组件 scroll-to-error 在使用 tab 滚动吸顶的时候，被吸顶的tab挡住

[DreamSeeker321]

项目中使用了tab组件, 并且开启了scrollspy sticky, 内部嵌入了form，然后form触发submit的时候，滚动到报错为止后，报错部分被吸顶的tab遮挡。

<van-tabs v-model:active="active" scrollspy sticky>
  <van-tab v-for="index in 8" :title="'选项 ' + index">
    <van-form></van-form>
  </van-tab>
</van-tabs>

可能的解决办法：
1、滚动到错误时，错误的元素在屏幕中间位置。
2、滚动到错误时，可以设置距离顶部的距离。

Tasks

Beta Give feedback

No tasks being tracked yet.

[lzwStore]

+1
+1

[pany-ang]

    <van-tabs v-model:active="active" scrollspy sticky>
      <van-tab v-for="index in 8" :title="'标签 ' + index" :key="index">
        <van-form @submit="onSubmit" scroll-to-error>
          <van-cell-group inset>
            <van-field
              v-model="username"
              name="用户名"
              label="用户名"
              placeholder="用户名"
              :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
              v-model="password"
              type="password"
              name="密码"
              label="密码"
              placeholder="密码"
              :rules="[{ required: true, message: '请填写密码' }]"
            />
          </van-cell-group>
          <div style="margin: 16px">
            <van-button round block type="primary" native-type="submit">
              提交
            </van-button>
          </div>
        </van-form>
      </van-tab>
    </van-tabs>

通过以上示例，并不能复现你描述的情况

[pany-ang]

我大概知道了你真正想描述的情景了。比如上述示例加上 offset-top 后就会出现遮挡：

<m-tabs v-model:active="active" scrollspy sticky offset-top="100">

我已提交一个 PR 来解决这个问题。该 PR 对 van-form 新增了一个 scrollToErrorPosition 属性，你可以将其设置为 scroll-to-error-position="center" 来解决你的问题。