uniapp 滚动到表单的某个位置,表单验证失败时。

滚动方法:

javascript 复制代码
scrollToElement(refName) {
				const selector = `#${refName}Ref`;
				const query = uni.createSelectorQuery().in(this);

				query.select(selector).boundingClientRect(res => {
					if (res) {
						console.log(this.currentScrollTop, res.top, this.currentScrollTop + res.top)
						// ✅ 正确计算:绝对位置 = 已滚动距离 + 元素在视口中的偏移
						const absoluteTop = this.currentScrollTop + res.top;

						// 可选:减去顶部固定区域高度(如导航栏 88px)
						const targetScrollTop = absoluteTop - 80;

						uni.pageScrollTo({
							scrollTop: Math.max(0, targetScrollTop), // 防止负数
							duration: 300
						});
					} else {
						console.warn('未找到元素:', selector);
					}
				}).exec();
			},
javascript 复制代码
onPageScroll(e) {
			// console.log(e, 'e')
			this.currentScrollTop = e.scrollTop;
		},
javascript 复制代码
currentScrollTop: 0,//滚动距离
javascript 复制代码
<u-form-item v-else :label="v.label" :labelWidth='v.labelWidth' :class="{'required':v.required}"
					v-bind="v.required ? { prop: v.key } : {}" :ref="v.key+'Ref'" :id="v.key+'Ref'">

表单验证:

javascript 复制代码
async submit() {
				console.log(this.formData)
				this.$refs.formDataRef.validate().then(valid => {
					if (this.formData.loading) return;
					let d = {
						USERNAME: uni.getStorageSync('userName'),
						FACTORYNAME: uni.getStorageSync('factory'),
						COMMANDTYPE: 'SPRCut',
						// LOTNAME: this.formData.LOTNAME,
						LOTNAME: this.formData.lotID,
						PRODUCTREQUESTNAME: this.formData.PRODUCTREQUESTNAME,
						OPERATIONNAME: this.formData.OPERATIONNAME,
						MACHINENAME: this.formData.MACHINENAME,
						CARRIERNAME: this.formData.CARRIERNAME,
						// MATERIALID: this.formData.MATERIALID, //卷材ID
						MATERIALID: this.formData.source_material_id, //卷材ID
						LENGTH: this.formData.LENGTH,
						comment: this.formData.comment,
					}
					if (this.formData.LENGTH <= 0) {
						this.showError('长度有误!')
						return;
					}
					if (this.formData.LENGTH > this.formData.lot_length) {
						this.showError('剩余长度:' + this.formData.lot_length)
						return;
					}
					this.showToast();
					this.formData.loading = true;
					this.$api.CLT_PRODUCT_EVENT(d).then(async res => {
						if (res.code === 0) {
							// this.infoData = {}
							this.showSuccess('操作成功!')
						} else {
							this.showError(res.msg)
						}
					}).catch(res => {
						this.showError(res.msg)
					}).finally(() => {
						this.formData.loading = false;
						uni.hideLoading();
					})
				}).catch((err) => {
					console.log('表单错误:', err)
					this.$refs.formDataRef.scrollToElement(err[0].field)
					uni.$u.toast(err && err[0].message)
				})
			},
相关推荐
sunly_29 分钟前
TypeScript总结:16、面向对象速查
前端·javascript·typescript
张元清33 分钟前
React useInterval Hook:没有过期闭包的 setInterval (2026)
javascript·react.js
MXN_小南学前端33 分钟前
React超长文本域中实现“返回顶部”浮动按钮
前端·javascript·react.js
学习嵌入式的小周1 小时前
Notepad++8.8.7下载安装(附安装包)
前端·notepad++
gs801401 小时前
解构 Cordis:面向“时空可组合性”的 TypeScript 元框架深度剖析
前端·javascript·typescript
Highcharts.js1 小时前
Highcharts大数据渲染模块Boost实战与参数最佳实践表
javascript·数据可视化·boost·highcharts·大数据渲染·加速配置·参数表
岁岁种桃花儿2 小时前
Vue核心语法第一篇:Vue是什么?
前端·javascript·vue.js
Highcharts.js2 小时前
数据可视化避坑指南 ——开发中常见图表错误与修复方案
javascript·信息可视化·数据可视化·highcharts·数据可视化避坑·修复方案
观无2 小时前
若依EasyExcel实现单元格合并
开发语言·前端·javascript
愚公搬代码3 小时前
【愚公系列】《Web应用安全》001-VMware的安装
前端·安全