视频连接网站怎么做,网站建设文化代理商,青浦集团网站建设,淄博建设企业网站先看看是不是你想要的#xff1a; 需求#xff1a;
有个填写数据的单子在提交的时候#xff0c;会对必填项做校验#xff0c;如果必填项没有数据的话#xff0c;必填项校验生效给出提示#xff0c;并且页面滚动到第一个需要填写数据的地方。
开发#xff1a;
因为这个…先看看是不是你想要的 需求
有个填写数据的单子在提交的时候会对必填项做校验如果必填项没有数据的话必填项校验生效给出提示并且页面滚动到第一个需要填写数据的地方。
开发
因为这个需求是后续增加的那也不可能改变样式结构那就在原来的基础上去写吧
首先想到是用uniapp的内置方法pageScrollTo这个方法可以让页面滚动到指定的位置比较合适。
开始上手
使用的vue3js写法 uni.pageScrollTo的参数 selector使用子元素选择器(在第二个view标签增加scrlloClass、第三个view标签增加scrollClass1类名) 子元素选择器.the-parent .the-child
上代码
const submit () {
// form表单绑定的是refform,因此使用使用form.value.validate方法对表单进行校验form.value.validate().then(res {// 成功后的执行方法即必填项都已经填写了}).catch(err {// 失败后的方法即有必填项没有填写// 输出的是必填项未填写的数据信息console.log(err, err);// 上图中的form表单是有三个view标签每个view标签中有多个uv-form-item标签list数组是将第二个和第三个view标签的必填项(每个form-item标签上prop的字段)列举下来let list [a, b, c, d, e, f, g, h]// 设置标签滚动位置let scrollNum undefined// scrollObj是uni.pageScrollTo方法的参数本文一共涉及到下面三个选项let scrollObj {// scrollTop: 0, // 指定滚动到离顶部的距离// duration: 500, // 滚动动画的时长// selector: .scrollClass .uv-form-item:nth-child(${scrollNum}) // 指定滚动的元素duration: 500,}// 先判断未填写的必填项中是否有name字段没有的话接着走if (err[0].field ! name) {try { // 使用try catch中断forEach循环list.forEach((e, i) {console.log(中断forEach);if (e err[0].field) {scrollNum i 1 // 指定标签元素nth-child是从1开始throw e // 抛给catch}})} catch (e) {scrollObj.selector .scrollClass .uv-form-item:nth-child(${scrollNum})if (e name) {// 上图中的form表单是有三个view标签给第三个form-item标签增加一个scrollClass1类名scrollObj.selector .scrollClass1 .uv-form-item:nth-child(1)}}console.log(scrollNum, scrollNum);} else {// 有name字段的话将scrollTop设置为0及滚动到页面顶部(第一个view标签见gif动图的第一块区域)scrollObj.scrollTop 0}uni.pageScrollTo(scrollObj);})}
问题解决无非就是获取必填项未填写的数组(下文称为arr)及validate方法的catch方法中的err将必填项的字段标识放到一个新数组里面拿到arr的第一项的field(第一个必填项的字段的标识)循环新数组如果新数组每一项和arr的第一项的field相等的话拿到该项索引索引加1用于确定滚动到该标签。
