vue 左侧导航右侧内容互定位

1.需求：点击左侧导航，右侧内容定位到指定位置。右侧数据内容滚动，左侧导航对应定位颜色。同时左侧导航复选框选中时，右侧内容位置对应选中。

部分代码通过百度网上查到，抄抄改改。
2.实现思路：左侧用 ul li 实现导航效果，从左侧导航到右侧内容定位可以用锚点方式。我这边左侧用 click点击事件，

<div style="width:100%;height:500px;overflow:auto">
<div class="left-menu"><ul ref="ul" id="uu"><li><a  @click="changeHash('#a',0)">基本信息</a></li><li><a  @click="changeHash('#b',1)">适用用户</a></li><li><a  @click="changeHash('#c',2)">判定条件</a></li><li><a  @click="changeHash('#d',3)"><el-checkbox v-model="windows"></el-checkbox>&nbsp;Windows</a></li><li><a  @click="changeHash('#e',4)"><el-checkbox v-model="MacOS"></el-checkbox>&nbsp;MacOS</a></li><li><a  @click="changeHash('#f',5)"><el-checkbox v-model="IOS"></el-checkbox>&nbsp;IOS</a></li><li><a  @click="changeHash('#i',5)"><el-checkbox v-model="Android"></el-checkbox>&nbsp;Android</a></li><li><a  @click="changeHash('#g',6)"><el-checkbox v-model="gray"></el-checkbox>&nbsp;灰度处置</a></li><li><a  @click="changeHash('#h',7)">处置动作</a></li></ul></div><!-- 接下面部分html内容 -->

changeHash(val,index){document.querySelector(val).scrollIntoView(true);}

而右侧内容部分，每个导航菜单对应的div都设置上对应的id

 <div class="right-content" id="content-list"><el-form :model="form" label-position="right" label-width="110px"><div class="classify-item" id="a" style="height:auto;width:100%;">内容部分</div><div class="classify-item" id="b" style="height:auto;width:100%;">内容部分</div><div class="classify-item" id="c" style="height:auto;width:100%;">内容部分</div></el-form></div> </div>

而我这边是在弹框中显示，所以在打开弹框操作中查询到ul li 对象内容以及右侧数据内容不分的高度

addFormBtn(){this.onlineVisible = true;this.$nextTick(()=>{let li = document.querySelectorAll('#uu>li')let contentList = document.getElementById('content-list');let contentHeightList = document.querySelectorAll('#content-list>form>div');let height = 0;this.heightList.push(height);contentHeightList.forEach(item =>{height += item.clientHeight;this.heightList.push(height);})contentList.addEventListener('scroll',(pos)=>{this.scrollY = Math.abs(Math.round(contentList.scrollTop))for(let i = 0;i<li.length;i++){if(i == this.currentIndex){li[i].className  = "li-color" ;}else {li[i].className  = "" ;}}// console.log(this.currentIndex,this.heightList)})})},

当前的位置通过对比已存的高度位置跟滚动的高度来确定

computed:{currentIndex(){const index = this.heightList.findIndex((item,index) =>{return this.scrollY >= this.heightList[index] && this.scrollY < this.heightList[index+1]})return index > 0 ? index : 0}},

以及部分css样式

.left-menu {width:20%;height: 100%;overflow: scroll;display: block;float: left;
}
.right-content {width:80%;height: 100%;overflow: scroll;display: block;
}
.left-menu ul {list-style-type: none;padding-inline-start:0;
}
.left-menu ul li {margin: 14px 5px;font-size: 1.2rem;font-weight: 600;text-align: left;}
.left-menu ul li.current {color:blue;
}
.left-menu ul li:focus,.left-menu ul li:active {color: dodgerblue;
}
.li-color {color: #1E90FF;
}
.classify-item {background: #fff;
}

最后重点最外层需要一个固定得高度，然后超出内容为auto，不然没外层父元素固定高度，内层内容没有临界滚动高度。当内层数据高度小于等于外层高度时，数据不滚动。当内层数据高度大于外层div高度时，数据内容出现滚动。

出现坑的地方：当最后一个导航菜单对应的右侧数据内容高度小于最外层高度时，我这边设置是500px 。左侧导航菜单没办法颜色定位选中到最后一个，而是在倒数第二个。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！