uniapp微信小程序pageScrollTo失效

问题描述:用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>

猜你喜欢

转载自blog.csdn.net/starstarstarl/article/details/129240801