Vant Sticky 粘性布局

介紹

Sticky 組件與 CSS 中position: sticky屬性實現(xiàn)的效果一致，當(dāng)組件在屏幕范圍內(nèi)時，會按照正常的布局排列，當(dāng)組件滾出屏幕范圍時，始終會固定在屏幕頂部。

引入

import Vue from 'vue';
import { Sticky } from 'vant';

Vue.use(Sticky);

代碼演示

基礎(chǔ)用法

將內(nèi)容包裹在Sticky組件內(nèi)即可

<van-sticky>
  <van-button type="primary">基礎(chǔ)用法</van-button>
</van-sticky>

吸頂距離

通過offset-top屬性可以設(shè)置組件在吸頂時與頂部的距離

<van-sticky :offset-top="50">
  <van-button type="info">吸頂距離</van-button>
</van-sticky>

指定容器

通過container屬性可以指定組件的容器，頁面滾動時，組件會始終保持在容器范圍內(nèi)，當(dāng)組件即將超出容器底部時，會固定在容器的底部

<div ref="container" style="height: 150px;">
  <van-sticky :container="container">
    <van-button type="warning">指定容器</van-button>
  </van-sticky>
</div>

export default {
  data() {
    return {
      container: null
    };
  },
  mounted() {
    this.container = this.$refs.container;
  }
};

API

Props

Events