收藏
回答

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

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

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

回答关注问题邀请回答
收藏

4 个回答

  • 无声谷主
    无声谷主
    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
    有用 1
    回复 4
    • 木...易
      木...易
      2020-12-10
      再次点击的时候  因为top值变了  然后又跳到其它地方去了
      2020-12-10
      回复
    • 铮——
      铮——
      05-12
      nice
      05-12
      回复
    • poiuyZ233
      poiuyZ233
      05-20
      nice
      05-20
      回复
    • poiuyZ233
      poiuyZ233
      05-20回复木...易
      wx.pageScrollTo({
          scrollTop: res[0].top + res[1].scrollTop - navHeight,
          duration: 300
         })
      05-20
      回复
  • A🤡
    A🤡
    01-19

    有用

    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
      回复
    • poiuyZ233
      poiuyZ233
      05-20
      试了下,没有
      05-20
      回复
  • Dear John
    Dear John
    2020-04-15

    跟进之后回复一下。

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