Skip to content

useTabScroll

这是一个tab滚动的hook。作用类似于vanttab组件中的滚动导航。但是vant使用了插槽,需要一定的组件结构,有的时候代码已经成型不方便修改,所以这里提供了一个hook来实现这个功能。

源文件

useTabScroll.ts

示例

基本使用

滚动位置自动改变ref变量并触发事件,也可以点击tab改变滚动位置。

在弹窗中使用

由于默认实在onMounted中绑定滚动事件的的,所以在弹窗中使用的时候需要指定在什么时候绑定(或则可以将弹窗内容代码放在另一个组件中保证正确触发滚动容器的事件绑定)。

props 参数

参数名说明类型默认值
第一个参数目标节点数组,必填TabScroll[],类型详情如下-
第二个参数滚动容器,ref或者支持querySelector的字符串或者节点,不填默认为windowRef<HTMLElement> | string | HTMLElementwindow
第三个参数目标节点距离顶部的大小,有的时候节点完全从顶部开始并不好看number20
第四个参数绑定和解绑的ref变量,为真时绑定滚动事件(确保滚动容器存在),为假时解绑滚动事件Ref<boolean>onMounted时绑定,onUnmounted时解绑

返回值

参数名说明类型默认值
tabActive当前滚动到的tab的key值Ref<string | number>-
onChange绑定滚动到tab时触发的事件(func: (key: string | number) => void | any ) => void-

TabScroll

参数名说明类型默认值
keytab的key值,用于标识当前滚动到了哪个tabstring | number-
valuetab的节点,用于滚动到这个节点时触发事件,如果是HTMLElement类型,请确保节点存在 HTMLElement | Ref<HTMLElement> | string-

Released under the MIT License.