使用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，用于确定滚动到该标签。