这个功能主要分为两步,第一步是点击Tab标签的同时,页面自动滚动到对应位置,这个实现起来比较简单,代码如下:
这里只要获取到对象后直接使用scrollIntoView()就可以了,其中behavior: "instant"代表直接跳转到相应位置,而smooth代表平滑滑动过去,个人认为smooth用起来用户体验会比较好一点,但是也有一定缺点,具体情况具体分析吧。
第二步就是随着页面滑动,自动切换Tab标签栏,这边要考虑到是整个页面的滑动还是页面中一个元素内部的页面滑动,整个页面的话就把获取到的元素换成window就可以,我这边主要贴一下部分元素内部的滑动吧,因为当时自己做的时候也是用window弄了好久发现根本监听不到页面滚动,具体代码如下:
首先要打开监听事件:
监听事件代码如下:
我这边的tabbarList就是tab标签列表,这个for循环必须倒着来。getBoundingClientRect().top这个函数主要是用来帮助我们获取元素顶部到视口顶部的距离,这样就可以实现标题所说的功能了。
最后要销毁监听事件: