Sticky 粘性布局

介绍

Sticky 组件与 CSS 中position: sticky属性实现的效果一致,当组件在屏幕范围内时,会按照正常的布局排列,当组件滚出屏幕范围时,始终会固定在屏幕顶部。

引入

app.jsonindex.json中引入组件,详细介绍见快速上手

  1. "usingComponents": {
  2. "van-sticky": "@vant/weapp/sticky/index"
  3. }

Vant Weapp 1.0 版本开始支持此组件,升级方式参见快速上手

代码演示

基础用法

将内容包裹在Sticky组件内即可。

  1. <van-sticky>
  2. <van-button type="primary">基础用法</van-button>
  3. </van-sticky>

吸顶距离

通过offset-top属性可以设置组件在吸顶时与顶部的距离。

  1. <van-sticky offset-top="{{ 50 }}">
  2. <van-button type="info">吸顶距离</van-button>
  3. </van-sticky>

指定容器

通过container属性可以指定组件的容器,页面滚动时,组件会始终保持在容器范围内,当组件即将超出容器底部时,会返回原位置。

  1. <view id="container" style="height: 150px;">
  2. <van-sticky container="{{ container }}">
  3. <van-button type="warning">
  4. 指定容器
  5. </van-button>
  6. </van-sticky>
  7. </view>
  1. Page({
  2. data: {
  3. container: null,
  4. },
  5. onReady() {
  6. this.setData({
  7. container: () => wx.createSelectorQuery().select('#container'),
  8. });
  9. },
  10. });

嵌套在 scroll-view 内使用

通过 scroll-topoffset-top 属性可以实现在 scroll-view 内嵌套使用。

  1. <scroll-view
  2. bind:scroll="onScroll"
  3. scroll-y
  4. id="scroller"
  5. style="height: 200px;"
  6. >
  7. <view style="height: 400px; padding-top: 50px;">
  8. <van-sticky scroll-top="{{ scrollTop }}" offset-top="{{ offsetTop }}">
  9. <van-button type="warning">
  10. 嵌套在 scroll-view 内
  11. </van-button>
  12. </van-sticky>
  13. </view>
  14. </scroll-view>
  1. Page({
  2. data: {
  3. scrollTop: 0,
  4. offsetTop: 0,
  5. },
  6. onScroll(event) {
  7. wx.createSelectorQuery()
  8. .select('#scroller')
  9. .boundingClientRect((res) => {
  10. this.setData({
  11. scrollTop: event.detail.scrollTop,
  12. offsetTop: res.top,
  13. });
  14. })
  15. .exec();
  16. },
  17. });

API

Props

参数说明类型默认值
offset-top吸顶时与顶部的距离,单位pxnumber0
z-index吸顶时的 z-indexnumber99
container一个函数,返回容器对应的 NodesRef 节点function-
scroll-top当前滚动区域的滚动位置,非 null 时会禁用页面滚动事件的监听number-

Events

事件名说明回调参数
scroll滚动时触发{ scrollTop: 距离顶部位置, isFixed: 是否吸顶 }

Sticky 粘性布局 - 图1