小程序 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()

posted @ 2022-07-27 09:36  guangzan  阅读(1095)  评论(0编辑  收藏  举报