useTabScroll
这是一个tab滚动的hook。作用类似于vant
的tab
组件中的滚动导航。但是vant使用了插槽,需要一定的组件结构,有的时候代码已经成型不方便修改,所以这里提供了一个hook来实现这个功能。
源文件
示例
基本使用
滚动位置自动改变ref变量并触发事件,也可以点击tab改变滚动位置。
在弹窗中使用
由于默认实在onMounted中绑定滚动事件的的,所以在弹窗中使用的时候需要指定在什么时候绑定(或则可以将弹窗内容代码放在另一个组件中保证正确触发滚动容器的事件绑定)。
props 参数
参数名 | 说明 | 类型 | 默认值 |
---|---|---|---|
第一个参数 | 目标节点数组,必填 | TabScroll[],类型详情如下 | - |
第二个参数 | 滚动容器,ref或者支持querySelector的字符串或者节点,不填默认为window | Ref<HTMLElement> | string | HTMLElement | window |
第三个参数 | 目标节点距离顶部的大小,有的时候节点完全从顶部开始并不好看 | number | 20 |
第四个参数 | 绑定和解绑的ref变量,为真时绑定滚动事件(确保滚动容器存在),为假时解绑滚动事件 | Ref<boolean> | onMounted时绑定,onUnmounted时解绑 |
返回值
参数名 | 说明 | 类型 | 默认值 |
---|---|---|---|
tabActive | 当前滚动到的tab的key值 | Ref<string | number> | - |
onChange | 绑定滚动到tab时触发的事件 | (func: (key: string | number) => void | any ) => void | - |
TabScroll
参数名 | 说明 | 类型 | 默认值 |
---|---|---|---|
key | tab的key值,用于标识当前滚动到了哪个tab | string | number | - |
value | tab的节点,用于滚动到这个节点时触发事件,如果是HTMLElement类型,请确保节点存在 | HTMLElement | Ref<HTMLElement> | string | - |