小程序 vant sticky 组件 offsetTop
问题
在当前版本 vant weapp 组件库中,sticky 组件 offsetTop 属性类型为 number,单位默认为 px 且无法更改,而小程序默认单位是 rpx。这导致在一些场景下,如 sticky 的元素与顶部须保留一定距离,无法直接设置 offsetTop。
解决
通过小程序 API 获取元素高度,动态设置 offsetTop,达到适配目的。
<van-sticky offset-top="{{offsetTop}}">
setOffsetTop() {
wx.createSelectorQuery()
.select('.banner')
.fields(
{ size: true },
({ height }) => this.setData({ offsetTop: height })
)
.exec()
}
如果在自定义组件中,使用
this.createSelectorQuery()
代替wx.createSelectorQuery()
。