mp-vue实现小程序回顶操作踩坑，wx.pageScrollTo使用无效填坑

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了mp-vue实现小程序回顶操作踩坑，wx.pageScrollTo使用无效填坑，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2119字，纯文字阅读大概需要4分钟。

内容图文

本来项目都写的差不多了，测试测着侧着就冒出了新的想法，我因为做的是问卷，因此会有用户必答题未答完的可能存在，本来市场部给的需求就是做一个弹窗就好了，她说想要做出跳回到用户未答的第一道题，好吧，既然都这么说了就只有实现一下了

首先来理一下思路：

1.要获取用户未填写的题目

2.定位到第一个未填写的题目节点

3.获取坐标并跳到该坐标位置

第一步获取用户未填写题目很容易啦，可以在里面加个字段什么的来标记是否填写，拿单选题为例当用户点击的时候触发事件传递给父组件

this.$emit('choice', {
          questionId: this.question.id,
          answerIds: e.target.value,
          selectedIndex: selectedIndex,
          areaId: this.question.areaId,
          ifAnswered: this.myIfAnswered  // 是否已答标志
        })

然后在提交的时候拿到未答的题目

for (let a = 0; a < this.submitArr.length; a++) {
    if (this.submitArr[a].ifAnswered === 'N') {
      this.notAnswered.push(this.submitArr[a])  
  }
}

为了要定位到未填写的题目，我是在初次渲染的时候就给每个组件绑定了该问题的唯一问题id，想要通过微信的selector去获取id直接获取到该组件的top值，结果就在这里踩坑了，因为我发现选择器使用id是不会返回结果的，经过多次失败之后我就尝试了类选择器，结果就出来了，我想可能是因为我绑定的id是数字？再然后就选择一些第一个内容就可以了。

var query = wx.createSelectorQuery()
let myTop = []
query.selectAll('.myAnswer').boundingClientRect()
query.exec((res) => {
    myTop = res[0]
}

let myChoose = myTop[0].top
wx.pageScrollTo({
  scrollTop: myChoose.,
  duration: 300
})

这里要记录一个坑，因为我也是第一次用这个滚动的API，百度出来人家都用的好好的，但是我的就是不行，不说回调失败了，根本好像就没有触发，什么fail，success，complete都没有打印日志，也搜到过同样的问题但是别人貌似都没有解决，问了一手师傅，但是师傅鼓捣了一上午也没搞出来，然后我就重新建了一个干净的页面发现可以滚动，于是乎我就尝试着把我的组件最外层样式删掉了，终于发现，原来是因为我的组件设置了position：absolute，貌似就是这个原因导致API无效，如果有其他小伙伴出现跟我一样的问题，记得一定看看自己的position，不能设置哦relative也不行，反正就是都不行。

谁曾想，我在自己的组件把position删掉了又出现了另一个问题，打印显示回调成功，但是界面并没有滚动，经过查找发现是page.js的配置出现了问题，这个项目原来设置了不让滚动，我简直无语了hhh

最后只需要把这个配置'disableScroll': true 删掉就可以了，因为默认的就是允许滚动。

内容总结

以上是互联网集市为您收集整理的mp-vue实现小程序回顶操作踩坑，wx.pageScrollTo使用无效填坑全部内容，希望文章能够帮你解决mp-vue实现小程序回顶操作踩坑，wx.pageScrollTo使用无效填坑所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---