收藏
回答

自定义导航栏导致wx.pageScrollTo的selector指定元素位置出现偏差?

点击右下角的按钮是跳转到item number:5才对,因为自定义导航栏后导致偏差一个导航栏高度的位移。

https://developers.weixin.qq.com/s/hg2E3amA7zgu

后续:

wx.pageScrollTo官方已经支持selector和offsetTop搭配解决问题,详情看https://developers.weixin.qq.com/miniprogram/dev/api/ui/scroll/wx.pageScrollTo.html

最后一次编辑于  2022-03-30
回答关注问题邀请回答
收藏

5 个回答

  • 小七要开心
    小七要开心
    2020-10-20

    自定义导航的话就不要用选择器了,改用scrollTop,配合query接口使用,效果良好

    //先获取导航高度
    wx.getSystemInfo({
      success: res => {
        const ios = !!(res.system.toLowerCase().search('ios') + 1)
        this.headerHeight = res.statusBarHeight + (ios?44:48)
      }
    })
    //用目标的top值减去导航高度
    const query = wx.createSelectorQuery()
    query.select('#'+id).boundingClientRect()
    query.selectViewport().scrollOffset()
    query.exec((res)=>{
      wx.pageScrollTo({
        scrollTop: res[0].top - this.headerHeight,
        duration: 300
      })
    })
    
    2020-10-20
    有用 3
    回复 6
    • 阿白
      阿白
      2020-12-10
      再次点击的时候  因为top值变了  然后又跳到其它地方去了
      2020-12-10
      回复
    • 铮——
      铮——
      2021-05-12
      nice
      2021-05-12
      回复
    • 天地2333
      天地2333
      2021-05-20
      nice
      2021-05-20
      回复
    • 天地2333
      天地2333
      2021-05-20回复阿白
      wx.pageScrollTo({
          scrollTop: res[0].top + res[1].scrollTop - navHeight,
          duration: 300
         })
      2021-05-20
      5
      回复
    • ༺袁小溅༻
      ༺袁小溅༻
      2022-04-13回复天地2333
      此楼正解,感谢
      2022-04-13
      回复
    查看更多(1)
  • ㅤㅤ
    ㅤㅤ
    01-24

    找到了,就是这个。会被fixed定位挡住。谢谢


    01-24
    有用
    回复
  • A🤡
    A🤡
    2021-01-19

    有用

    2021-01-19
    有用
    回复
  • Mendel
    Mendel
    2020-08-19

    我最近也遇到了这样的问题,我是这样解决的,希望可以帮到你:

    假设你要跳转到元素 item-goto,那么在该元素的前面创建一个空元素 item-before,例如

    <view id="item-before"></view>
    <view id="item-goto">...</view>
    


    然后设置样式如下:

    #item-before {
        position: relative;
        top: -134rpx;  
    }
    


    具体的像素数值可以调整到合适的位置即可

    2020-08-19
    有用
    回复 2
    • Julytian
      Julytian
      2020-08-20
      top就是差一个自定义导航栏的大小
      2020-08-20
      回复
    • 天地2333
      天地2333
      2021-05-20
      试了下,没有
      2021-05-20
      回复
  • ꯭꯭D꯭e꯭a꯭r꯭ ꯭J꯭o꯭h꯭n꯭
    ꯭꯭D꯭e꯭a꯭r꯭ ꯭J꯭o꯭h꯭n꯭
    2020-04-15

    跟进之后回复一下。

    2020-04-15
    有用
    回复
登录 后发表内容
问题标签