uniapp表单uni-forms校验失败后页面滚动到相应位置

这里用到的ui框架是uni-ui，如果直接使用uView校验失败页面会自动定位到相应位置。

1、给uni-forms-item添加唯一id，我用的是form-item的v-model方便之后使用。

2、在onReady中给form添加校验规则（注意：必须在页面渲染完成后）。

3、表单校验catch中，使用uni.pageScrollTo，利用selector定位到id位置。

<!-- 基础表单校验 -->
<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
    <uni-forms-item label="姓名" required name="name" id="name">
        <uni-easyinput v-model="valiFormData.name" placeholder="请输入姓名" />
    </uni-forms-item>
    <uni-forms-item label="年龄" required name="age" id="age>
        <uni-easyinput v-model="valiFormData.age" placeholder="请输入年龄" />
    </uni-forms-item>
    <uni-forms-item label="自我介绍" name="introduction" id="introduction">
        <uni-easyinput type="textarea" v-model="valiFormData.introduction" placeholder="请输入自我介绍" />
    </uni-forms-item>
</uni-forms>
<button type="primary" @click="submit('valiForm')">提交</button>

<script>
	export default {
		data() {
			return {
				// 校验表单数据
				valiFormData: {
					name: '',
					age: '',
					introduction: '',
				},
				// 校验规则
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					age: {
						rules: [{
							required: true,
							errorMessage: '年龄不能为空'
						}, {
							format: 'number',
							errorMessage: '年龄只能输入数字'
						}]
					}
				},

			}
		},
		onReady() {
			// 设置自定义表单校验规则，必须在节点渲染完毕后执行
			this.$refs.customForm.setRules(this.rules)
		},
		methods: {
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					console.log('success', res);
					uni.showToast({
						title: `校验通过`
					})
				}).catch(err => {
					console.log('err', err);
                    let key = '#' + err[0].key
                    uni.pageScrollTo({
                        selector: key,
                        duration: 500,
                        offsetTop: 10,
                        success: function () {

                        }
                    })
				})
			},
		}
	}
</script>