网站页面吸引力,霸州放心的网络建站,旅游类网站开发设计报告,河北中瑞建设集团有限公司网站需求#xff1a;SideBar 侧边导航与内容区域交互
点击侧边栏某一项时#xff0c;相对应内容区域滚动到视口顶部滚动视口区域#xff0c;到某一项内容区域#xff0c;侧边栏选中状态也会跟着变化
const SideBarAgain: React.FCPopupProps (props) {// 父组件…需求SideBar 侧边导航与内容区域交互
点击侧边栏某一项时相对应内容区域滚动到视口顶部滚动视口区域到某一项内容区域侧边栏选中状态也会跟着变化
const SideBarAgain: React.FCPopupProps (props) {// 父组件传过来的值const { tabList } propsconst mainElementRef useRefHTMLDivElement(null)// 用来监听页面滚动事件const scroll useScroll(mainElementRef);const mainElement mainElementRef.currentconst state useReactive({ activeKey: 1 });const handleScroll (key?:string) {// 滚动时需要修改侧边栏选中状态// 过滤出元素顶部到视窗的距离大于0的元素const currentKey tabList.filter((item: { key: string }){const element document.getElementById(anchor-${item.key})if (!element) returnconst rect element.getBoundingClientRect()if (rect.top 0) {return item}})// 判断如果currentKey大于0则选取第一个key值if(currentKey.length){state.activeKey currentKey[0].key}else{state.activeKey tabList[tabList.length-1].key}// 点击侧边栏传入的ID并滚动到对应位置if(key){document.getElementById(anchor-${key})?.scrollIntoView({behavior: smooth})state.activeKey key}}useEffect(() {if (!mainElement) returnmainElement.addEventListener(scroll, () handleScroll)return () {mainElement.removeEventListener(scroll, () handleScroll)}}, [])// 利用scroll的变化监听handleScrolluseLayoutEffect(() handleScroll,[scroll])return (div classNamesiderSideBar activeKey{state.activeKey} onChange{(key)handleScroll(key)}{tabList.map((item: { key: string, title: string }) (SideBar.Item key{item.key} title{item.title} /))}/SideBardiv classNamemain ref{mainElementRef}{tabList.map((item: { key: string; title: string; text: string}) (div key{item.key} id{anchor-${item.key}} h2{item.title}/h2{item.text}/div))}/div/div)
}export default SideBarAgain;
