前端侧栏Tab和内容滚动联动切换标题

前端侧栏Tab和内容滚动联动切换标题

我们阳光沙滩博客系统课程里有一个关于页面

我们做成这个样子

点击侧栏可以切换右边内容；滚动右侧内容，可以切换左边的内容。

基本UI实现

左侧使用 ElementUI的组件Tabs

https://element.eleme.cn/#/zh-CN/component/tabs

同学们可以去这里使用，至于怎么依赖ElementUI，可以参考官方说明，或者学习我们的前端课程。

右侧布局

关于阳光沙滩 阳光沙滩创立于2014年11月22日，那是一个阳光明媚的下午。韩寒的电影《后会无期》里面有一句台词：sun of beach （阳光沙滩），于是阳光沙滩创立。阳光沙滩是一个学习编程的社区网站。 你可以在这里学习，写博客，写笔记，分享经验，提问题，分享链接。你可以遇到志同道合的人，收获知识、经验与同性朋友。 我们的使命 让学习编程变得更加简单。 我们的愿景 让每一个热爱编程的年轻人成为优秀的程序员。 旗下网站 阳光沙滩主站 阳光沙滩商城 阳光沙滩网店 联系我们 广告投放 ad@sunofbeach.net(仅作演示) 商务合作 bd@sunofbeach.net(仅作演示) 内容投诉 rp@sunofbeach.net(仅作演示)

左边固定，右边加个margin值。

事件处理

事件主要包括两部分：滚动、点击左侧

滚动

滚动的话，我们需要处理侧栏悬浮

添加滚动监听：

mounted() { ...... window.addEventListener("scroll", this.onWindowScroll); this.onWindowScroll(); },

记得删除监听

beforeDestroy() { window.removeEventListener('scroll', this.onWindowScroll); },

这里面就是滑动的代码了

onWindowScroll() { let dy = document.documentElement.scrollTop; let dx = document.documentElement.scrollLeft; let leftBox = document.getElementById('about-left-part'); let parentBox = document.getElementById('about-box'); if (leftBox && parentBox) { let parentBoxTop = parentBox.offsetTop; // console.log(parentBoxTop); if (dy > parentBoxTop) { leftBox.style.top = '0px'; } else { leftBox.style.top = (parentBoxTop - dy) + 'px'; }

//处理横向滑动 if (dx > 0) { leftBox.style.left = -dx + "px"; } else { leftBox.style.left = parentBox.offsetLeft + "px"; } } if (!this.isClickLeftSwitch) { //处理标签的滚动范围 for (let i = 0; i < this.contentHeaders.length - 1; i++) { let first = this.contentHeaders[i]; let second = this.contentHeaders[i + 1]; if (dy >= first.offTop && dy < second.offTop) { this.target = first.id; //console.log(this.target); break; } } } else { this.isClickLeftSwitch = false; }

点击事件处理

onLeftItemClick() { this.isClickLeftSwitch = true; this.$router.push({ path: '/about#' + this.target }); // console.log(this.target); }

具体的话请去视频教程吧