使用uniapp.pageScrollTo方法进行页面滚动

先看看是不是你想要的：

需求：

有个填写数据的单子在提交的时候，会对必填项做校验，如果必填项没有数据的话，必填项校验生效给出提示，并且页面滚动到第一个需要填写数据的地方。

开发：

因为这个需求是后续增加的，那也不可能改变样式结构，那就在原来的基础上去写吧！

首先想到是用uniapp的内置方法pageScrollTo，这个方法可以让页面滚动到指定的位置，比较合适。

开始上手：

使用的vue3+js写法：

uni.pageScrollTo的参数：

selector使用子元素选择器：(在第二个view标签增加scrlloClass、第三个view标签增加scrollClass1类名)

• 子元素选择器：.the-parent > .the-child

上代码：

const submit = () => {
// form表单绑定的是ref="form",因此使用使用form.value.validate方法对表单进行校验form.value.validate().then(res => {// 成功后的执行方法，即必填项都已经填写了}).catch(err => {// 失败后的方法，即有必填项没有填写// 输出的是必填项未填写的数据信息console.log('err', err);// 上图中的form表单是有三个view标签，每个view标签中有多个uv-form-item标签，list数组是将第二个和第三个view标签的必填项(每个form-item标签上prop的字段)列举下来let list = ["a", 'b', "c", "d", "e", "f", "g", "h"]// 设置标签滚动位置let scrollNum = undefined// scrollObj是uni.pageScrollTo方法的参数，本文一共涉及到下面三个选项let scrollObj = {// scrollTop: 0, // 指定滚动到离顶部的距离// duration: 500, // 滚动动画的时长// selector: `.scrollClass > .uv-form-item:nth-child(${scrollNum})` // 指定滚动的元素duration: 500,}// 先判断未填写的必填项中是否有name字段，没有的话接着走if (err[0].field !== 'name') {try { // 使用try catch中断forEach循环list.forEach((e, i) => {console.log('中断forEach');if (e === err[0].field) {scrollNum = i + 1 // 指定标签元素（nth-child是从1开始）throw e // 抛给catch}})} catch (e) {scrollObj.selector = `.scrollClass > .uv-form-item:nth-child(${scrollNum})`if (e === 'name') {// 上图中的form表单是有三个view标签，给第三个form-item标签增加一个scrollClass1类名scrollObj.selector = `.scrollClass1 > .uv-form-item:nth-child(1)`}}console.log('scrollNum', scrollNum);} else {// 有name字段的话，将scrollTop设置为0，及滚动到页面顶部(第一个view标签，见gif动图的第一块区域)scrollObj.scrollTop = 0}uni.pageScrollTo(scrollObj);})}

问题解决无非就是获取必填项未填写的数组(下文称为arr)，及validate方法的catch方法中的err，将必填项的字段标识放到一个新数组里面，拿到arr的第一项的field(第一个必填项的字段的标识)，循环新数组，如果新数组每一项和arr的第一项的field相等的话，拿到该项索引，索引加1，用于确定滚动到该标签。