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)
				})
			},
相关推荐
Sarvartha11 分钟前
三目运算符
linux·服务器·前端
晓晨的博客18 分钟前
ROS1录制的bag包转换为ROS2格式
前端·chrome
Wect26 分钟前
LeetCode 72. 编辑距离:动态规划经典题解
前端·算法·typescript
donecoding39 分钟前
别再让 pnpm 跟着 nvm 跑了!独立安装终极指南
前端·node.js·前端工程化
不可能的是39 分钟前
从 /simplify 指令深挖 Claude Code 多 Agent 协同机制
javascript
GISer_Jing41 分钟前
AI全栈转型_TS后端学习路线
前端·人工智能·后端·学习
竹林81841 分钟前
被The Graph的GraphQL查询坑了三天,我用一个真实DeFi项目把链上数据索引彻底搞懂了
前端·graphql
漫游的渔夫41 分钟前
前端开发者做 Agent:别只会执行,用 4 类失败策略让 AI 知道怎么停
前端·人工智能·typescript
用户0595401744644 分钟前
把多级缓存一致性验证从手工测试换成 Pytest 参数化,Bug 排查时间缩短 90%
前端·css
暗不需求1 小时前
深入理解 LangChain:AI 应用开发框架的工程化实践
前端·langchain