问题描述:用uniapp写微信小程序,form表单校验,校验没通过时滚动到对应位置,用wx.pageScrollTo通过id定位,在H5端正常,但是在微信小程序失效
wx.pageScrollTo({
selector: key,
duration: 500,
offsetTop: 0,
})
查找到问题原因是给uniapp的html组件加id,编译到小程序找不到这个id
解决方法:在uniapp组件外套一层<view>并添加id
<uni-forms v-else ref="form" :modelValue="info" :label-width="100">
<view id="xm">
<uni-forms-item label="姓名" required name="xm">
<uni-easyinput v-model="workerinfo.xm" placeholder="请输入姓名"/>
</uni-forms-item>
</view>
</uni-forms>
<script>
export default {
name: "edit",
data() {
return {
info: {
xm:'',
},
rules: {
xm: {
rules: [{
required: true,
errorMessage: '请输入姓名'
}]
},
},
}
},
onShow() {
// #ifdef MP || H5
this.$nextTick(() => {
this.$refs.form.setRules(this.rules);
});
// #endif
},
methods: {
submit() {
this.$refs['form'].validate().then(res => {
}).catch(err => {
let key = '#' + err[0].key
wx.pageScrollTo({
selector: key,
duration: 500,
offsetTop: 0,
success: function () {
}
})
})
},
}
}
</script>