react实现导航栏二级联动_React

作者：温柔锝钩子勾到你疼死- | 来源：互联网 | 2023-09-16 18:37

这篇文章主要为大家详细介绍了react实现导航栏二级联动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的

本文实例为大家分享了react实现导航栏二级联动的具体代码，供大家参考，具体内容如下

效果图

js代码

import { Component } from "react";
import './scroll.less'

class Scroll extends Component {
constructor(...args) {
super(...args)
this.state = {
list: [
{ id: 1, title: '列表1' },
{ id: 2, title: '列表2' },
{ id: 3, title: '列表3' },
{ id: 4, title: '列表4' },
{ id: 5, title: '列表5' },
{ id: 6, title: '列表6' },
{ id: 7, title: '列表7' },
{ id: 8, title: '列表8' },
{ id: 9, title: '列表9' },
{ id: 10, title: '列表10' },
{ id: 11, title: '列表11' },
{ id: 12, title: '列表12' },
{ id: 13, title: '列表13' },
{ id: 14, title: '列表14' },
{ id: 15, title: '列表15' },
{ id: 16, title: '列表16' },
{ id: 17, title: '列表17' },
],
LeftList: [
{ id: 1, title: '列表1', height: 800 },
{ id: 2, title: '列表2', height: 600 },
{ id: 3, title: '列表3', height: 500 },
{ id: 4, title: '列表4', height: 900 },
{ id: 5, title: '列表5', height: 450 },
{ id: 6, title: '列表6', height: 300 },
{ id: 7, title: '列表7', height: 900 },
{ id: 8, title: '列表8', height: 1010 },
{ id: 9, title: '列表9', height: 300 },
{ id: 10, title: '列表10', height: 600 },
{ id: 11, title: '列表11', height: 400 },
{ id: 12, title: '列表12', height: 760 },
{ id: 13, title: '列表13', height: 580 },
{ id: 14, title: '列表14', height: 630 },
{ id: 15, title: '列表15', height: 540 },
{ id: 16, title: '列表16', height: 983 },
{ id: 17, title: '列表17', height: 610 },
],
curr: 0,//存储下标
}
// 默认添加一个因为第一个的scrollTop值是0
this.LeftHeight = [0]
// 滚动的开关
this.Swich = true
}
// 渲染完成获取每一个列表距离顶部的距离
componentDidMount() {
// 定义为0 每次就可以循环加起来就是盒子距离顶部的距离
this.Height = 0
// 循环获取每一个的高
for (var i = 0; i this.Height += this.state.LeftList[i].height
// 将它添加到数组中
this.LeftHeight.push(this.Height)
}
}
// 点击左侧列表点击获取下标
fnTab(Ind) {
// 点击的时候让右边的滚动事件为false
this.Swich = false
// 存储下标
this.setState({
curr: Ind
})
// 根据下标取出数组中对应下标的scrollTop值就让右边的scrollTop为数组中取出的值
this.refs['rightItem'].scrollTop = this.LeftHeight[Ind];

// this.refs.scrollLeft.scrollTop = this.state.curr - 4 * 58.89
}
FnScroll() {
// 监听滚动
this.scrollTop = this.refs['rightItem'].scrollTop
// 这边用开关判断是否执行
if (this.Swich) {
// 存放下标
let num = 0
// 循环取出数组中的数值
for (var i = 0; i if (this.scrollTop >= this.LeftHeight[i]) {
num = i
}
}
// 存储下标
this.setState({
curr: num
})
}
// 判断滚动的值和数组中的值相等开关为true
if (this.scrollTop == this.LeftHeight[this.state.curr]) {
setTimeout(() => {
this.Swich = true;
});
}
}
render() {
return (

{this.state.list.map((item, index) =>

{item.title}

)}

{this.state.LeftList.map((item) =>

{item.title}

)}

)
}
}
export default Scroll

less代码

* {
margin: 0;
padding: 0;
}

.box {
width: 100vw;
height: 100vh;
background: red;

.scroll {
width: 100vw;
height: 100vh;
display: flex;

// 右边列表
.scroll-right {
width: 25vw;
background: aqua;
font-size: 28px;
height: 100vh;
overflow-y: auto;

.right-item {
width: 25vw;
height: 80px;
text-align: center;
line-height: 80px;
border-bottom: 1px solid #ccc;
}

.active {
height: 80px;
text-align: center;
line-height: 80px;
background: #0f0;
}
}

// 左边内容
.scroll-left {
width: 75vw;
height: 100vh;
overflow-y: auto;
//滚动的更加丝滑
scroll-behavior: smooth;

.left-item {
width: 75vw;
font-size: 30px;
text-align: center;

.item-title {
height: 30px;
background: #ccc;
}
}
}
}
}