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)
				})
			},
相关推荐
weixin_4255437318 分钟前
TRAE CN3.3.25 构建的Electron简易DEMO应用
前端·typescript·electron·vite·nestjs
Mr Xu_1 小时前
【Vue3 + ECharts 实战】正确使用 showLoading、resize 与 dispose 避免内存泄漏
前端·信息可视化·vue·echarts
0思必得01 小时前
[Web自动化] Selenium设置相关执行文件路径
前端·爬虫·python·selenium·自动化
雯0609~1 小时前
hiprint:实现项目部署与打印1-官网提供普通html版本
前端·html
yuezhilangniao2 小时前
AI智能体全栈开发工程化规范 备忘 ~ fastAPI+Next.js
javascript·人工智能·fastapi
不绝1912 小时前
UGUI——进阶篇
前端
Exquisite.2 小时前
企业高性能web服务器(4)
运维·服务器·前端·网络·mysql
铅笔侠_小龙虾3 小时前
Flutter Demo
开发语言·javascript·flutter
2501_944525543 小时前
Flutter for OpenHarmony 个人理财管理App实战 - 账户详情页面
android·java·开发语言·前端·javascript·flutter
2601_949857433 小时前
Flutter for OpenHarmony Web开发助手App实战:快捷键参考
前端·flutter