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)
				})
			},
相关推荐
学到头秃的suhian41 分钟前
Spring使用三级缓存解决循环依赖问题
前端·spring·缓存
CXH72843 分钟前
架构师的登山之路|第十二站:服务网格 Istio——未来的标配,还是复杂过头?
前端·javascript·istio
脾气有点小暴1 小时前
详解 HTML Image 的 mode 属性:图像显示模式的灵活控制
前端·html·uniapp
爱吃无爪鱼1 小时前
03-Bun vs Node.js:JavaScript 运行时的新旧之争
javascript·vue.js·react.js·npm·node.js
0思必得02 小时前
[Web自动化] 开发者工具性能(Performance)面板
运维·前端·自动化·web自动化·开发者工具
心灵的制造商2 小时前
el-tree左侧新增类别和删除类别实例代码
前端·javascript·vue.js
爱吃无爪鱼2 小时前
01-前端开发快速入门路线图
javascript·css·vue.js·typescript·前端框架·npm·node.js
冴羽2 小时前
不知道怎么写 Nano Banana Pro 提示词?分享你一个结构化示例,复刻任意图片
前端·人工智能·aigc
IT_陈寒2 小时前
JavaScript 性能优化:7个 V8 引擎隐藏技巧让你的代码提速200%
前端·人工智能·后端