This theme is from Cnblog |

guangzan

园龄:6年5个月粉丝:676关注:333

2022-07-27 09:36阅读: 1227评论: 0推荐: 2

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

本文作者:guangzan

本文链接:https://www.cnblogs.com/guangzan/p/16523571.html

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   guangzan  阅读(1227)  评论(0编辑  收藏  举报
评论
收藏
关注
推荐
深色
回顶
收起
点击右上角即可分享
微信分享提示