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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值