Description of the problem: Use uniapp to write WeChat applets, form form verification, scroll to the corresponding position when the verification fails, and use wx.pageScrollTo to locate through id. It is normal on the H5 side, but it fails on the WeChat applet
wx.pageScrollTo({
selector: key,
duration: 500,
offsetTop: 0,
})The cause of the problem is to add id to the html component of uniapp, and the id cannot be found after compiling the applet
Solution: wrap a layer of <view> in the uniapp component and add 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>