Sticky 粘性布局

介绍

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

注意：当前各浏览器对 position: sticky 支持度已很高，如无特殊兼容需求可使用 CSS 方式实现。

引入

import { Sticky, StickyItem } from 'mind-ui-vue';
Vue.use(Sticky);
Vue.use(StickyItem);

基本用法

<m-sticky :scroll-Top="scrollTop" @change="onChange">
  <m-sticky-item name="A">
    <div class="sticky-title" slot="title">
      <div>03月25日</div>
    </div>
    <div class="content" slot="content">
      <div>梦里不知身是客</div>
      <div>梦里不知身是客</div>
      <div>梦里不知身是客</div>
    </div>
  </m-sticky-item>

  <m-sticky-item name="B">
    <div class="sticky-title" slot="title">
      <div>03月26日</div>
    </div>
    <div class="content" slot="content">
      <div>直把他乡作故乡</div>
      <div>直把他乡作故乡</div>
      <div>直把他乡作故乡</div>
    </div>
  </m-sticky-item>

  <m-sticky-item name="C">
    <div class="sticky-title" slot="title">
      <div>03月27日</div>
    </div>
    <div class="content" slot="content">
      <div>独自莫凭栏</div>
      <div>独自莫凭栏</div>
      <div>独自莫凭栏</div>
    </div>
  </m-sticky-item>
</m-sticky>

Api

Sticky Props

参数	说明	类型	可选值	默认值
scroll-top	页面滚动距离顶部距离	Number	—	—
offset-top	吸顶时距离顶部距离(单位 px)	Number String	—	—
z-index	吸顶节点的 z-index 值	Number	—	9
use-sticky	是否使用 css 的 position: sticky 属性，可通过 m-can-use-sticky 组件获取是否支持该属性	Boolean	—	false

Sticky Events

事件名称	说明	返回值
change	吸顶时子组件对应的 name 值，use-sticky === false 时生效	event.detail: 子组件 name 值

Sticky Props

参数	说明	类型	可选值	默认值
name	吸顶组件的 name 值，吸顶时在 change 事件中返回	String	—	—

StickyItem Slots

名称	说明
title	吸顶组件吸顶时显示的内容
content	吸顶组件内容