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)
				})
			},
相关推荐
螺丝钉tina1 小时前
[Playwright] [02]常用命令与调试:Debug UI、Mode和 Trace Viewer
开发语言·javascript·测试工具·ui·自动化
PedroQue991 小时前
0.8.2 新增 backFallback 配置,无 tabbar 页返回无忧
前端·uni-app
淡漠的蓝精灵2 小时前
web.py:一个简单到极致的 Python Web 框架
开发语言·前端·python·其他
开开心心就好2 小时前
竖式除法出题工具,整除余数混合模式
运维·服务器·前端·javascript·ocr·perl·1024程序员节
起个名字费劲死了2 小时前
Halcon学习一:骰子识别
前端·python·学习
大江东去浪淘尽千古风流人物2 小时前
【HexVIO】DSP卸载双目惯性VIO:Hexagon向量化前端与单帧融合调度深度解析
前端·状态模式·slam·dsp·vio·hexagon·移动端加速
এ慕ོ冬℘゜2 小时前
JS 事件循环、宏任务微任务:单线程底层原理 + 执行顺序
开发语言·javascript·ecmascript
其实防守也摸鱼2 小时前
Chrome 扩展安全攻防实录:从攻击面到防御实践
开发语言·前端·网络·chrome·安全·web安全·php
web打印社区2 小时前
Lodop排障总纲-常见报错一张表
开发语言·前端·javascript·chrome·websocket
李剑一3 小时前
为什么几乎所有的知名开源项目都是外国人写的?
前端·ai编程·deepseek