📌 将页面元素固定在可视范围内。
Live demo: https://pdsuwwz.github.io/hoc-element-affix
- Vue 2.6.0+
npm install @hoc-element/affiximport Vue from 'vue'
import HocElementAffix from '@hoc-element/affix'
Vue.use(HocElementAffix)- 自定义顶部偏移量
- 固定状态改变时触发的回调
- 插槽式的固定状态反馈
| 字段 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| offsetTop | （可选）距离窗口顶部多少时开始固定 | Number | 0 |
| 字段 | 说明 | 类型 |
|---|---|---|
| change | （可选）固定状态发生改变时的回调函数 | Function |
绑定的数据默认在一个对象里，如需要可直接解构再使用
| 字段 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| affixed | （可选）实时的固定状态 | Boolean | false |
下面是比较全的例子，几乎囊括了 API 的所有用法，源码戳这： Code
<template>
<div class="box-container">
<div class="content">
<div class="long-list">
<div
v-for="(item, index) in 50"
:key="index"
class="long"
>
<template
v-if="index === 2"
>
<hoc-el-affix>
<template v-slot="{ affixed }">
<div class="box">
<span style="font-size: 25px">{{ affixed ? '🍎' : '🍏' }}</span>
吸顶【插槽版】
</div>
</template>
</hoc-el-affix>
</template>
<template
v-else-if="index === 9"
>
<hoc-el-affix
:offset-top="120"
@change="handleAffixed120"
>
<div class="box">
<span style="font-size: 25px">{{ isAffixed120 ? '🌝' : '🌚' }}</span>
距离顶部120px时固定【回调版】
</div>
</hoc-el-affix>
</template>
<template
v-else
>
{{ index === 49 ? '到底了' : `占位符${index + 1}` }}
</template>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'ExampleAffix',
data () {
return {
isAffixed120: false
}
},
methods: {
handleAffixed120 (affixed) {
this.isAffixed120 = affixed
}
}
}
</script>
<style lang="scss" scoped>
.box-container {
.content {
position: relative;
width: 300px;
margin: 0 auto;
text-align: center;
.box {
width: 300px;
height: 50px;
line-height: 50px;
border: 1px solid #000;
}
.long-list {
.long {
height: 50px;
line-height: 50px;
font-size: 16px;
}
}
}
}
</style>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent