- 小demo 记录一下 点击左边 右边出现对应的列表内容 滑动右边左边出现对应的索引值
- 左边列表css 时间线 记录一下
<template>
<div class="el-courtWrap">
<el-row class="el-left">
<div id="time-line">
<div
class="item"
v-for="(item, index) in menuList"
:key="index"
:class="{ itemHight: menuIndex === index }"
@click="handleMenuList(index)"
>
<div class="item-index">{{ item.value }}</div>
<!-- <div class="item-content">HELLO WORLD</div> -->
</div>
</div>
</el-row>
<el-row class="el-right" id="el-scroll">
<el-scrollbar style="height: 97%" ref="elScrollbar">
<el-row :id="`el-list${index}`" v-for="(item, index) in menuList" :key="index" :style="{'background': item.backGround}">{{item.value}}</el-row>
</el-scrollbar>
</el-row>
</div>
<!-- </el-dialog> -->
</template>
<script>
export default {
data() {
return {
menuIndex: 0,
menuList: [
{
value: '设备0',
backGround: '#f44336'
},
{
value: '设备1',
backGround: '#e91e63'
},
{
value: '设备2',//#endregion
backGround: '#9c27b0'
},
{
value: '设备3',
backGround: '#009688'
},
{
value: '设备4',
backGround: '#4caf50'
},
{
value: '设备5',
backGround: '#cddc39'
},
{
value: '设备6',
backGround: '#03a9f4'
},
],
};
},
mounted() {
let element = document.querySelector('#el-scroll');
element.addEventListener('scroll', this.handleScroll, true);
},
methods: {
handleScroll(e) {
let scrollTop = this.$refs.elScrollbar.wrap.scrollTop;
let num = this.menuList.length;
for (let n = 0; n < num; n++) {
if (document.querySelector('#el-list' + n).offsetTop < scrollTop + 40) {
this.menuIndex = n;
}
}
},
handleMenuList(index) {
this.menuIndex = index;
let navPage = document.querySelector('#el-list' + index);
this.$refs.elScrollbar.wrap.scrollTop = navPage.offsetTop; //兼容大部分浏览器
},
},
};
</script>
<style lang="less" >
.el-right .el-scrollbar__wrap {
overflow-x: hidden;
}
</style>
<style lang="less" scoped>
.el-courtWrap {
height: 115%;
display: flex;
position: relative;
.el-left {
height: 100%;
width: 300px;
display: flex;
align-items: center;
.item {
margin-left: 30px;
width: calc(100% - 30px);
height: auto;
position: relative;
margin-bottom: 30px;
cursor: pointer;
}
.item::before {
content: '';
width: 11px;
height: 11px;
border-radius: 100%;
background-color: #e4e7ed;
position: absolute;
left: -15px;
}
.item::after {
content: '';
width: 3px;
height: calc(100% + 30px);
background-color: #e4e7ed;
position: absolute;
top: 0;
left: -11px;
}
.item:last-child::after {
content: '';
width: 3px;
height: 0;
background-color: #e4e7ed;
position: absolute;
top: 0;
left: -11px;
}
.item-index {
line-height: 12px;
font-size: 12px;
position: relative;
left: 5px;
color: #656565;
}
.item-content {
width: 100%;
height: auto; /*由内容决定*/
position: relative;
white-space: pre-wrap; /*保留空白符序列,但是正常地进行换行*/
word-wrap: break-word; /*在长单词或 URL 地址内部进行换行*/
}
.item:hover::before {
transform: scale3d(1.2, 1.2, 1);
background-color: #569ffb;
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
z-index: 10;
}
// .item:hover::after {
// transform: scale3d(1.1, 1, 1);
// background-color: #569ffb;
// }
.item:hover .item-index {
transform: scale3d(1.1, 1.1, 1);
color: #343434;
}
.itemHight::before {
transform: scale3d(1.2, 1.2, 1);
background-color: #569ffb;
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
z-index: 10;
}
.itemHight .item-index {
transform: scale3d(1.1, 1.1, 1);
color: #343434;
}
}
.el-right {
flex: 1;
margin: 0 auto;
width: 80%;
height: 92%;
margin-bottom: 1%;
// overflow-y: auto;
#el-list0,
#el-list1,
#el-list2,
#el-list3,
#el-list4,
#el-list5,
#el-list6 {
text-align: center;
height: 500px;
line-height: 500px;
font-weight: bold;
}
.el-content {
border-bottom: 1px dashed #c0c4cc;
padding: 0 40px;
}
}
}
</style>
效果如下