vue+element 实现点击左侧树形控件实现右侧滚动定位

树形控件实现定位+平滑滚动（左树形右内容）

具体实现代码如下：

<template><div class="detail"><div class="detail-content"><div class="detail-content-left"><div><el-tree:data="data":props="defaultProps"@node-click="handleNodeClick"/></div></div><div class="detail-content-right"><divv-for="(item, index) in list":key="index"class="scroll-item"><div>{{ item.title }}</div><div>{{ item.content }}</div></div></div></div></div>
</template>
<script>
export default {data() {return {clickdata:"",data: [{label: "一级 1"},{label: "一级 2"},{label: "一级 3",children: [{label: "二级 3-1",children: [{label: "三级 3-1-1"}]},{label: "二级 3-2",children: [{label: "三级 3-2-1"}]}]}],defaultProps: {children: "children",label: "label"},list: [{title: "1",content: "1-1"},{title: "2",content: "2-2"},{title: "3",content: "3-2"},{title: "1",content: "1-1"},{title: "2",content: "2-2"},{title: "3",content: "3-2"},{title: "1",content: "1-1"},{title: "2",content: "2-2"},{title: "3",content: "3-2"},{title: "1",content: "1-1"},{title: "2",content: "2-2"},{title: "3",content: "3-2"},{title: "1",content: "1-1"},{title: "2",content: "2-2"},{title: "3",content: "3-2"},{title: "1",content: "1-1"}]};},computed: {},created() {},methods: {handleNodeClick(data) {this.clickdata = data.$treeNodeId;console.log(this.clickdata);this.scrollTo(this.clickdata);},// 滚动监听器onScroll() {// 获取所有锚点元素const navContents = document.querySelectorAll(".scroll-item");// 所有锚点元素的 offsetTopconst offsetTopArr = [];navContents.forEach(item => {offsetTopArr.push(item.offsetTop);});// 获取当前文档流的 scrollTopconst scrollTop =document.documentElement.scrollTop || document.body.scrollTop;// 定义当前点亮的导航下标let navIndex = 0;for (let n = 0; n < offsetTopArr.length; n++) {// 如果 scrollTop 大于等于第n个元素的 offsetTop 则说明 n-1 的内容已经完全不可见// 那么此时导航索引就应该是n了if (scrollTop >= offsetTopArr[n]) {navIndex = n;}}this.active = navIndex;},// 跳转到指定索引的元素scrollTo(index) {// 获取目标的 offsetTop// css选择器是从 1 开始计数，我们是从 0 开始，所以要 +1const targetOffsetTop = document.querySelector(`.scroll-item:nth-child(${index + 1})`).offsetTop;// 获取当前 offsetToplet scrollTop =document.documentElement.scrollTop || document.body.scrollTop;// 定义一次跳 50 个像素，数字越大跳得越快，但是会有掉帧得感觉，步子迈大了会扯到蛋const STEP = 50;// 判断是往下滑还是往上滑if (scrollTop > targetOffsetTop) {// 往上滑smoothUp();} else {// 往下滑smoothDown();}// 定义往下滑函数function smoothDown() {// 如果当前 scrollTop 小于 targetOffsetTop 说明视口还没滑到指定位置if (scrollTop < targetOffsetTop) {// 如果和目标相差距离大于等于 STEP 就跳 STEP// 否则直接跳到目标点，目标是为了防止跳过了。if (targetOffsetTop - scrollTop >= STEP) {scrollTop += STEP;} else {scrollTop = targetOffsetTop;}document.body.scrollTop = scrollTop;document.documentElement.scrollTop = scrollTop;// 关于 requestAnimationFrame 可以自己查一下，在这种场景下，相比 setInterval 性价比更高requestAnimationFrame(smoothDown);}}// 定义往上滑函数function smoothUp() {if (scrollTop > targetOffsetTop) {if (scrollTop - targetOffsetTop >= STEP) {scrollTop -= STEP;} else {scrollTop = targetOffsetTop;}document.body.scrollTop = scrollTop;document.documentElement.scrollTop = scrollTop;requestAnimationFrame(smoothUp);}}}},destroy() {// 必须移除监听器，不然当该vue组件被销毁了，监听器还在就会出错window.removeEventListener("scroll", this.onScroll);}
};
</script>
<style lang="scss" scoped>
// 此处使用scss如若less改成less即可
.detail {width: 1009px;&-content {display: flex;justify-content: space-between;&-left {background: #fff;width: 220px;padding: 10px 0 0 20px;div {background: #fff;}}&-right {width: 780px;background: #fff;margin-left: 9px;padding: 20px;}}
}
</style>

vue+element 实现点击左侧树形控件实现右侧滚动定位相关推荐

【vue】使用vue+element搭建项目，Tree树形控件使用
目录一.安装依赖二.常用属性.事件三.demo应用 html代码属性用法 3.2.1 :default-expanded-keys(默认展开项) 3.2.2 :props="defa ...
理解Vue递归组件，实现Tree树形控件实例~
思考了两天时间,准备仿照ant-design-vue实现一个基于vue的树形控件.主要用到了vue递归组件思想.input的CheckBox类型输入框的使用. 需求能够将传入的Json数据生成树形目 ...
前端VUE【实战】—— antd tree树形控件进行增删改查父子节点
个人博客:前端江太公前言 antd 对树形控件目录进行增删改查最近在用Ant Design写一个后台,遇到的需求就是实现一个可动态增减和编辑子节点的Tree. 实现的效果如下: 可以增加父子节点 ...
qt中树形控件QTreeWidget的项点击后获取该项的文本
概述通过点击树形控件的项,可以得到被点击的树形控件的文本,使用树形控件的信号itemPressed与所在类的槽函数绑定,通过传递参数QTreeWidgetItem和列column,在绑定的槽函数中得 ...
Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）
这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单输入过滤框以CSS样式为主,也会涉及到Vue组件和element组件的使用. 对于没有层级的数据,我们可以使用表格或卡片来展示.要展示或建立层级 ...
vue+element tree(树形控件数据格式)组件(1)
vue+element tree(树形控件数据格式)组件(1), 最近做了第一个组内可以使用的组件,虽然是最简版,也废了不少力.各位前辈帮我解决问题,才勉强搞定.让我来记录这个树形组件的编写过程和期间 ...
vue的$nextTick使用总结，this.$refs为undefined的解决办法，element Ui的树形控件setCheckedKeys方法无法使用
vue的$nextTick使用总结,this.$refs为undefined的解决办法,element Ui的树形控件setCheckedKeys方法无法使用参考文章: (1)vue的$nextTi ...
vue+element树形控件实现根据条件(例id)禁用选项
项目中遇到的需求,就是根据已选择的id,遍历树形控件,只允许用户选择变量ids里面的id下面的children数据,其他都要禁用,不能选择,下面是代码: <template><el- ...
element组件树形控件el-tree点击展开节点，节点重影
本来想传视频看的清除一些,传不了视频,改gif格式还要下载软件算了算了,凭手速截了这一张图. 先发现问题与解决 1.我是调用接口的时候发现的,有超级多的数据,本来以为我是数据多才出现这种问题, 2. ...

vue+element 实现点击左侧树形控件实现右侧滚动定位

树形控件实现定位+平滑滚动（左树形右内容）

vue+element 实现点击左侧树形控件实现右侧滚动定位相关推荐

最新文章

热门文章