小程序
小游戏
企业微信
微信支付
扫描小程序码分享
点击右下角的按钮是跳转到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
5 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
自定义导航的话就不要用选择器了,改用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 }) })
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
找到了,就是这个。会被fixed定位挡住。谢谢
有用
我最近也遇到了这样的问题,我是这样解决的,希望可以帮到你:
假设你要跳转到元素 item-goto,那么在该元素的前面创建一个空元素 item-before,例如
<view id="item-before"></view> <view id="item-goto">...</view>
然后设置样式如下:
#item-before { position: relative; top: -134rpx; }
具体的像素数值可以调整到合适的位置即可
跟进之后回复一下。
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
自定义导航的话就不要用选择器了,改用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 }) })
scrollTop: res[0].top + res[1].scrollTop - navHeight,
duration: 300
})
找到了,就是这个。会被fixed定位挡住。谢谢
有用
我最近也遇到了这样的问题,我是这样解决的,希望可以帮到你:
假设你要跳转到元素 item-goto,那么在该元素的前面创建一个空元素 item-before,例如
<view id="item-before"></view> <view id="item-goto">...</view>
然后设置样式如下:
#item-before { position: relative; top: -134rpx; }
具体的像素数值可以调整到合适的位置即可
跟进之后回复一下。