3.1 KiB
3.1 KiB
::: anchor :::
::: title 基本介绍 :::
::: describe 使用锚点，可以将内容固定在容器内，并且不随容器的滚动而滚动，常用于侧边菜单导航等。 :::
::: title 基础使用 :::
::: demo 使用 lay-affix 标签, 创建锚点，target 属性用于需要监听其滚动事件的元素，默认为 document.body ,offset设置距离容器的偏移量
固定在最顶部
固定在距离顶部38px
固定在距离顶部76px
固定在距离顶部114px
固定在距离顶部152px
<script setup>
import { nextTick,ref } from 'vue'
const target=ref()
nextTick(()=>{
target.value=document.querySelector(".layui-body");
})
const color=ref(0)
const scroll=(e)=>{
color.value=e.offset*2
}
</script>
:::
::: title 固定在最底部 :::
::: demo 使用 position 属性, 改变定位属性，默认为 top,可选值 bottom
固定在最底部
<script setup>
import { nextTick,ref } from 'vue'
const target=ref()
nextTick(()=>{
target.value=document.querySelector(".layui-body");
})
</script>
:::
::: title Aiffx 属性 :::
::: table
| 属性 | 描述 | 可选值 |
|---|---|---|
| position | 定位属性 : string | top bottom |
| offset | 偏移量 : number,默认为0 | - |
| target | 指定参考容器 : HTMLElement | 默认document.body,请务必确保能够正确获取到dom |
:::
::: title Aiffx 事件 :::
::: table
| 属性 | 描述 | 回调参数 |
|---|---|---|
| scroll | 初始化完成与滚动时触发的回调，回调会返回一个object{targetScroll:string,affixed:boolean,offset:number} |
targetScroll 容器滚动距离affixed 是否处于fixed状态offset 与原本位置的距离 |
:::
::: contributor affix :::
::: previousNext affix :::