zoukankan      html  css  js  c++  java
  • mp-vue实现小程序回顶操作踩坑,wx.pageScrollTo使用无效填坑

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

    首先来理一下思路:

    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 删掉就可以了,因为默认的就是允许滚动。

  • 相关阅读:
    transition的属性变化
    transition过渡动画
    增删改查的45道题
    4月18 数据库的CRUD操作
    php 中输入输出提交
    4月12 php练习
    3月29 表单以及正则表达式
    3月27 隐藏导航
    3月26 document的练习
    3月25 JavaScript 练习题
  • 原文地址:https://www.cnblogs.com/fdd-111/p/11770720.html
Copyright © 2011-2022 走看看