官方地址

最近遇见一个需求，小程序，页面上有个tabs, tabs下方是tabs每一项对应的内容，在页面上滑滚动时，如果tabs滚动到最上方要求tabs吸顶，选中某项tab时，要自动滚动到tab对应的内容，在某项tab对应的内容滚动到顶部时，需要tabs自动选中内容对应的tab。非常常见的需求，讲一下思路。

1.tabs滚动到最上方要求tabs吸顶

两种方式：

• 设置tabs position:sticky;top:0; 这种方式很简单优雅，但是兼容性上要注意。
• 监听界面滚动，当tabs滚动到某个位置，设置tabs position: fixed; top: 0; 这种方式相对复杂，但兼容性好。

2. 选中某项tab时，要自动滚动到tab对应的内容

在每项tab对应的内容标题上设置id属性，结合scroll-view标签的scroll-into-view属性，在点击某项tab的时候，设置scroll-into-view值为对应的id.

3.在某项tab对应的内容滚动到顶部时，需要tabs自动选中内容对应的tab

此时可以使用createIntersectionObserver方法。当元素滚动到最上方，则选中对应的tab, 此时需要注意处理tab点击事件与滚动设置选中tab两个事件的冲突。

介绍：

uni.createIntersectionObserver([this], [options])
第一个参数一般就传入this。

options:

• thresholds： 一个数值数组，包含所有阈值。默认为 [0]。可以是0-1之间的多个值，每次到达阈值会触发回调。
• initialRatio： 初始的相交比例，如果调用时检测到的相交比例与这个值不相等且达到阈值，则会触发一次监听器的回调函数。默认为 0。大于0 代表相交，1代表完全相交。
• observeAll： 是否同时观测多个参照节点（而非一个），如果设为 true，observe 的 targetSelector 将选中多个节点（注意：同时选中过多节点将影响渲染性能）

IntersectionObserver对象方法：

• relativeTo(selector,[margins])： 使用选择器指定一个节点，作为参照区域之一。

• relativeToViewport([margins]) 指定页面显示区域作为参照区域之一
  margins 参数含有left、right、top、bottom属性，用来扩展（或收缩）参照节点布局区域的边界，目标节点进入这几个属性范围就会触发回调。

• observe(selector,[callback]) 指定目标节点并开始监听相交状态变化情况。回调函数 callback 包含一个参数 result。
  ObserveResult ：
  1）boundingClientRect：目标节点布局区域的边界（left、right、top、bottom、width、height）
  2）intersectionRatio 相交比例 0-1
  3）intersectionRect 相交区域的边界（left、right、top、bottom、width、height）
  4）relativeRect：参照区域的边界（left、right、top、bottom）

• disconnect() 停止监听。回调函数将不再触发。