这篇文章给大家分享的是有关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.state.LeftList.length - 1; 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 < this.LeftHeight.length - 1; 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 ( <div className='box'> <div className='scroll'> <div className='scroll-right' ref='scrollLeft'> {this.state.list.map((item, index) => <div className='right-item' className={this.state.curr === index ? "active" : "right-item"} key={item.id} onClick={this.fnTab.bind(this, index)} >{item.title}</div>)} </div> <div className='scroll-left' ref='rightItem' onScroll={this.FnScroll.bind(this)}> {this.state.LeftList.map((item) => <div className='left-item' key={item.id} style={{ height: item.height }}><div className='item-title'>{item.title}</div></div>)} </div> </div> </div> ) }}export default Scrollless代码
* { 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; } } } }}感谢各位的阅读！关于“react如何实现导航栏二级联动”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
