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

原本项目都写的差很少了,测试测着侧着就冒出了新的想法,我由于作的是问卷,所以会有用户必答题未答完的可能存在,原本市场部给的需求就是作一个弹窗就行了,她说想要作出跳回到用户未答的第一道题,好吧,既然都这么说了就只有实现一下了微信

首先来理一下思路:测试

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

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

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

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

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

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

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也不行,反正就是都不行。get

谁曾想,我在本身的组件把position删掉了又出现了另外一个问题,打印显示回调成功,可是界面并无滚动,通过查找发现是page.js的配置出现了问题,这个项目原来设置了不让滚动,我简直无语了hhhit

最后只须要把这个配置'disableScroll': true 删掉就能够了,由于默认的就是容许滚动。

相关文章
相关标签/搜索