点我扫二维码，查看demo
# Sticky 粘性布局组件
# 介绍
Sticky 组件与 CSS 中position: sticky属性实现的效果一致，当组件在屏幕范围内时，会按照正常的布局排列，当组件滚出屏幕范围时，始终会固定在屏幕顶部。
# 引入
通过以下方式来按需注册组件。
import Vue from 'vue';
import { Sticky } from '@dolphin-iot/ui'
Vue.use(Sticky);
1
2
3
4
2
3
4
# 代码演示
# 基础用法
将内容包裹在 Sticky 组件内即可。
<template>
<div class="container">
<mx-sticky>
<mx-nav-bar title="粘性布局" />
</mx-sticky>
</div>
</template>
<style>
.container{
height:3000px
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 吸附距离
通过设置 offset 属性，可以控制组件，吸附顶部的距离。
<template>
<div class="container">
<mx-sticky :offset="50">
<mx-nav-bar title="吸顶距离" />
</mx-sticky>
</div>
</template>
<style>
.container{
height:3000px
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 吸附距离
通过 container 属性可以指定组件的容器，页面滚动时，组件会始终保持在容器范围内，当组件即将超出容器底部时，会固定在容器的底部。
<template>
<div class="container">
<div ref="sc" class="sticky-container">
<mx-sticky :container="sc" :offset="50">
<mx-nav-bar title="吸顶距离" />
</mx-sticky>
</div>
</div>
</template>
<script>
export default{
data(){
return {
sc:null
}
},
mounted(){
this.sc = this.$refs.sc
}
}
</script>
<style>
.container{
height:3000px
}
.sticky-container{
height: 300px
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
# Api
# Props
| 参数 | 说明 | 类型 | 默认值 | 是否必须 |
|---|---|---|---|---|
| offset | 指定吸附的距离 | number | 0 | - |
| container | 指定吸附的容器 | element | - | - |
| position | 指定吸附为顶部还是底部,可选值为: top, bottom | string | top | - |
| z-index | 指定吸附时的z轴层级 | number | 1060 | - |
# Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| scroll | 滚动时触发 | { scrollTop: number, isFixed: boolean } |