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 刪掉就可以了,因為默認的就是允許滾動。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM