业务背景
在详情中需要设置导航菜单，用户点击或者滚动，菜单选中对应项。
概览
设置菜单选项
/*
params: {
anchor: 引入组件的id；
text: 导航名称
}
*/
const navList = [
{ anchor: 'procurement', text: '采购项目信息' },
{ anchor: 'supplier', text: '供应商信息' },
{ anchor: 'contract', text: '合同信息' },
{ anchor: 'receipt', text: '收讫单信息' },
{ anchor: 'invoice', text: '发票信息' },
{ anchor: 'zcMotherAuthority', text: '数字母权证信息' },
{ anchor: 'zcSonAuthority', text: '数字子权证信息' },
{ anchor: 'bankAbutment', text: '银行对接' },
{ anchor: 'paymentInfo', text: '付款信息', check: true },
];
滚动逻辑
const observeMain = await new IntersectionObserver(changeActive, {
root: document.querySelector('main'), // 设置实例根元素
rootMargin: '20px', // 设置根元素的margin值
threshold: [0], // 交叉比例触发回调函数，设置每一个组件触发函数的比例；最大值1，最小值0
IntersectionObserverEntry: {
// 对象提供目标元素的信息
intersectionRatio: 0.5, // 设置目标元素的可见比例。 完全可见为1，完全不可见小于等于0
},
});
props.list.map((item) => {
let el = document.getElementById(item.anchor); // 获取配置菜单的每一项id，然后注册
el && observeMain.observe(el);
});
