本文详细记录了解决超长表单提交时，如何将页面自动滚动到第一个校验失败的元素的过程。作者尝试了通过focus和scrollIntoView方法，但遇到了键盘弹出和组件内无法获取DOM的问题。最终，通过uni.createSelectorQuery获取组件DOM并保存其位置，成功实现了点击提交时自动滚动至第一个错误项的功能，提供了良好的用户体验。
这个问题困扰了我1个周，走了很多弯路，总算解决。。。
问题描述：
开发中，会出现超长表单的情况。
而一般我们的‘提交’按钮都是在底部或者顶部悬挂。
这时就会出现一个问题：当我们点击提交时，校验失败的表单元素不在可视范围，点击没有反应的情况。
如果能直接移到第一个校验失败的表单元素处，即是最棒的体验。
******************************思路整理（觉得啰嗦直接跳至解决问题）*******************************
思路一：校验失败时 触发focus，这样有一个不好的体验，每次都会触发键盘的弹起，即使setTimeout 隐藏键盘 uni.hideKeyboard(); 还是会闪一下。这个问题是无解。（有好办法请留言，万分感谢）
思路二：获取dom，调用scrollIntoView. vue3.2 的ref ,无法取到dom . 后发现uni.createSelectorQuery().selectAll()可以获取dom元素的大小，位置的属性，但在组件内部怎么都取不到，一直返回null，这个问题解决方案详见
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
