做需求是有多个页面需要切换tab滑动，滑动监听切换tab，在这记录下提取的滚动监听的方法和应用，方法提取后放在工具类utils里
// 点击tab切换
changeTab (index, elClass) {
let scrollTop =$('#bd').scrollTop(); // 滚动卷起高低
const el2 =$(elClass).offset().top; // 距离屏幕顶距离
let toTop = scrollTop + el2 -59;
document.getElementById('bd').scrollTo({
top: toTop,
left:0,
behavior:'smooth'
});
},
滑动监听切换，主要是根据两个tab和3个tab
// 滚动监听设置tab
setTab (_this, tab1Class, tab2Class, tab3Class) {
let scrollTop =$('#bd').scrollTop(); // 滚动卷起高低，$('#bd')这个是需要滚动的区域，也可通过参数传过来，如果滚动window直接写
// const tab1 = $(tab1Class).offset().top; // 距离屏幕顶距离
const tab2 =$(tab2Class).offset().top; // 距离屏幕顶距离
const tab3 = tab3Class ?$(tab3Class).offset().top :0; // 距离屏幕顶距离
// 可以根据 -260表示在距离顶部多少的时候切换tab，上部可以用-60，中部可用260-460
// let toTop1 = scrollTop + tab1 - 260;
let toTop2 = scrollTop + tab2 -260;
let toTop3 = scrollTop + tab3 -260;
if (tab3Class) {
if (scrollTop >=0 && scrollTop < toTop2) {
_this.setState({currentTabIndex:1 });
}else if (scrollTop >= toTop2 && scrollTop < toTop3) {
_this.setState({currentTabIndex:2 });
}else if (scrollTop >= toTop3) {
_this.setState({currentTabIndex:3 });
}
}else {
if (scrollTop >=0 && scrollTop < toTop2) {
_this.setState({currentTabIndex:1 });
}else if (scrollTop >= toTop2) {
_this.setState({currentTabIndex:2 });
}
}
}
页面调用：
注意滚动监听的时候为了性能加上节流
this.onScroll =throttle(this.onScroll, 400);
componentWillUnmount () {
window.removeEventListener('scroll', this.onScroll, true);//这里一定要加true，否则不生效有点纳闷why
}
componentDidMount () {
window.addEventListener('scroll', this.onScroll, true);
}
onScroll = () => {
util.setTab(this, '.add-info-tab1', '.add-info-tab2', this.state.loanFileList.length ?'.add-info-tab3' :'');
};
