经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » React » 查看文章
react实现导航栏二级联动
来源:jb51  时间:2022/3/8 10:43:15  对本文有异议

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

效果图

js代码

  1. import { Component } from "react";
  2. import './scroll.less'
  3. ?
  4. class Scroll extends Component {
  5. ? ? constructor(...args) {
  6. ? ? ? ? super(...args)
  7. ? ? ? ? this.state = {
  8. ? ? ? ? ? ? list: [
  9. ? ? ? ? ? ? ? ? { id: 1, title: '列表1' },
  10. ? ? ? ? ? ? ? ? { id: 2, title: '列表2' },
  11. ? ? ? ? ? ? ? ? { id: 3, title: '列表3' },
  12. ? ? ? ? ? ? ? ? { id: 4, title: '列表4' },
  13. ? ? ? ? ? ? ? ? { id: 5, title: '列表5' },
  14. ? ? ? ? ? ? ? ? { id: 6, title: '列表6' },
  15. ? ? ? ? ? ? ? ? { id: 7, title: '列表7' },
  16. ? ? ? ? ? ? ? ? { id: 8, title: '列表8' },
  17. ? ? ? ? ? ? ? ? { id: 9, title: '列表9' },
  18. ? ? ? ? ? ? ? ? { id: 10, title: '列表10' },
  19. ? ? ? ? ? ? ? ? { id: 11, title: '列表11' },
  20. ? ? ? ? ? ? ? ? { id: 12, title: '列表12' },
  21. ? ? ? ? ? ? ? ? { id: 13, title: '列表13' },
  22. ? ? ? ? ? ? ? ? { id: 14, title: '列表14' },
  23. ? ? ? ? ? ? ? ? { id: 15, title: '列表15' },
  24. ? ? ? ? ? ? ? ? { id: 16, title: '列表16' },
  25. ? ? ? ? ? ? ? ? { id: 17, title: '列表17' },
  26. ? ? ? ? ? ? ],
  27. ? ? ? ? ? ? LeftList: [
  28. ? ? ? ? ? ? ? ? { id: 1, title: '列表1', height: 800 },
  29. ? ? ? ? ? ? ? ? { id: 2, title: '列表2', height: 600 },
  30. ? ? ? ? ? ? ? ? { id: 3, title: '列表3', height: 500 },
  31. ? ? ? ? ? ? ? ? { id: 4, title: '列表4', height: 900 },
  32. ? ? ? ? ? ? ? ? { id: 5, title: '列表5', height: 450 },
  33. ? ? ? ? ? ? ? ? { id: 6, title: '列表6', height: 300 },
  34. ? ? ? ? ? ? ? ? { id: 7, title: '列表7', height: 900 },
  35. ? ? ? ? ? ? ? ? { id: 8, title: '列表8', height: 1010 },
  36. ? ? ? ? ? ? ? ? { id: 9, title: '列表9', height: 300 },
  37. ? ? ? ? ? ? ? ? { id: 10, title: '列表10', height: 600 },
  38. ? ? ? ? ? ? ? ? { id: 11, title: '列表11', height: 400 },
  39. ? ? ? ? ? ? ? ? { id: 12, title: '列表12', height: 760 },
  40. ? ? ? ? ? ? ? ? { id: 13, title: '列表13', height: 580 },
  41. ? ? ? ? ? ? ? ? { id: 14, title: '列表14', height: 630 },
  42. ? ? ? ? ? ? ? ? { id: 15, title: '列表15', height: 540 },
  43. ? ? ? ? ? ? ? ? { id: 16, title: '列表16', height: 983 },
  44. ? ? ? ? ? ? ? ? { id: 17, title: '列表17', height: 610 },
  45. ? ? ? ? ? ? ],
  46. ? ? ? ? ? ? curr: 0,//存储下标
  47. ? ? ? ? }
  48. ? ? ? ? // 默认添加一个 因为第一个的scrollTop值是0
  49. ? ? ? ? this.LeftHeight = [0]
  50. ? ? ? ? // 滚动的开关
  51. ? ? ? ? this.Swich = true
  52. ? ? }
  53. ? ? // 渲染完成获取每一个列表距离顶部的距离
  54. ? ? componentDidMount() {
  55. ? ? ? ? // 定义为0 每次就可以循环加起来就是盒子距离顶部的距离
  56. ? ? ? ? this.Height = 0
  57. ? ? ? ? // 循环获取每一个的高
  58. ? ? ? ? for (var i = 0; i < this.state.LeftList.length - 1; i++) {
  59. ? ? ? ? ? ? this.Height += this.state.LeftList[i].height
  60. ? ? ? ? ? ? // 将它添加到数组中
  61. ? ? ? ? ? ? this.LeftHeight.push(this.Height)
  62. ? ? ? ? }
  63. ? ? }
  64. ? ? // ? 点击左侧列表 点击获取下标
  65. ? ? fnTab(Ind) {
  66. ? ? ? ? // 点击的时候让右边的滚动事件为false
  67. ? ? ? ? this.Swich = false
  68. ? ? ? ? // 存储下标
  69. ? ? ? ? this.setState({
  70. ? ? ? ? ? ? curr: Ind
  71. ? ? ? ? })
  72. ? ? ? ? // 根据下标取出数组中对应下标的scrollTop值 ?就让右边的scrollTop为数组中取出的值
  73. ? ? ? ? this.refs['rightItem'].scrollTop = this.LeftHeight[Ind];
  74. ?
  75. ? ? ? ? // this.refs.scrollLeft.scrollTop = this.state.curr - 4 * 58.89
  76. ? ? }
  77. ? ? FnScroll() {
  78. ? ? ? ? // 监听滚动
  79. ? ? ? ? this.scrollTop = this.refs['rightItem'].scrollTop
  80. ? ? ? ? // 这边用开关判断是否执行
  81. ? ? ? ? if (this.Swich) {
  82. ? ? ? ? ? ? // 存放下标
  83. ? ? ? ? ? ? let num = 0
  84. ? ? ? ? ? ? // 循环取出数组中的数值
  85. ? ? ? ? ? ? for (var i = 0; i < this.LeftHeight.length - 1; i++) {
  86. ? ? ? ? ? ? ? ? if (this.scrollTop >= this.LeftHeight[i]) {
  87. ? ? ? ? ? ? ? ? ? ? num = i
  88. ? ? ? ? ? ? ? ? }
  89. ? ? ? ? ? ? }
  90. ? ? ? ? ? ? // 存储下标
  91. ? ? ? ? ? ? this.setState({
  92. ? ? ? ? ? ? ? ? curr: num
  93. ? ? ? ? ? ? })
  94. ? ? ? ? }
  95. ? ? ? ? // 判断滚动的值和数组中的值相等 开关为true
  96. ? ? ? ? if (this.scrollTop == this.LeftHeight[this.state.curr]) {
  97. ? ? ? ? ? ? setTimeout(() => {
  98. ? ? ? ? ? ? ? ? this.Swich = true;
  99. ? ? ? ? ? ? });
  100. ? ? ? ? }
  101. ? ? }
  102. ? ? render() {
  103. ? ? ? ? return (
  104. ? ? ? ? ? ? <div className='box'>
  105. ? ? ? ? ? ? ? ? <div className='scroll'>
  106. ? ? ? ? ? ? ? ? ? ? <div className='scroll-right' ref='scrollLeft'>
  107. ? ? ? ? ? ? ? ? ? ? ? ? {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>)}
  108. ? ? ? ? ? ? ? ? ? ? </div>
  109. ? ? ? ? ? ? ? ? ? ? <div className='scroll-left' ref='rightItem' onScroll={this.FnScroll.bind(this)}>
  110. ? ? ? ? ? ? ? ? ? ? ? ? {this.state.LeftList.map((item) => <div className='left-item' key={item.id} style={{ height: item.height }}><div className='item-title'>{item.title}</div></div>)}
  111. ? ? ? ? ? ? ? ? ? ? </div>
  112. ?
  113. ? ? ? ? ? ? ? ? </div>
  114. ? ? ? ? ? ? </div>
  115. ? ? ? ? )
  116. ? ? }
  117. }
  118. export default Scroll

less代码

  1. * {
  2. ? ? margin: 0;
  3. ? ? padding: 0;
  4. }
  5. ?
  6. .box {
  7. ? ? width: 100vw;
  8. ? ? height: 100vh;
  9. ? ? background: red;
  10. ?
  11. ? ? .scroll {
  12. ? ? ? ? width: 100vw;
  13. ? ? ? ? height: 100vh;
  14. ? ? ? ? display: flex;
  15. ?
  16. ? ? ? ? // 右边列表
  17. ? ? ? ? .scroll-right {
  18. ? ? ? ? ? ? width: 25vw;
  19. ? ? ? ? ? ? background: aqua;
  20. ? ? ? ? ? ? font-size: 28px;
  21. ? ? ? ? ? ? height: 100vh;
  22. ? ? ? ? ? ? overflow-y: auto;
  23. ?
  24. ? ? ? ? ? ? .right-item {
  25. ? ? ? ? ? ? ? ? width: 25vw;
  26. ? ? ? ? ? ? ? ? height: 80px;
  27. ? ? ? ? ? ? ? ? text-align: center;
  28. ? ? ? ? ? ? ? ? line-height: 80px;
  29. ? ? ? ? ? ? ? ? border-bottom: 1px solid #ccc;
  30. ? ? ? ? ? ? }
  31. ?
  32. ? ? ? ? ? ? .active {
  33. ? ? ? ? ? ? ? ? height: 80px;
  34. ? ? ? ? ? ? ? ? text-align: center;
  35. ? ? ? ? ? ? ? ? line-height: 80px;
  36. ? ? ? ? ? ? ? ? background: #0f0;
  37. ? ? ? ? ? ? }
  38. ? ? ? ? }
  39. ?
  40. ? ? ? ? // 左边内容
  41. ? ? ? ? .scroll-left {
  42. ? ? ? ? ? ? width: 75vw;
  43. ? ? ? ? ? ? height: 100vh;
  44. ? ? ? ? ? ? overflow-y: auto;
  45. ? ? ? ? ? ? //滚动的更加丝滑
  46. ? ? ? ? ? ? scroll-behavior: smooth;
  47. ?
  48. ? ? ? ? ? ? .left-item {
  49. ? ? ? ? ? ? ? ? width: 75vw;
  50. ? ? ? ? ? ? ? ? font-size: 30px;
  51. ? ? ? ? ? ? ? ? text-align: center;
  52. ?
  53. ?
  54. ? ? ? ? ? ? ? ? .item-title {
  55. ? ? ? ? ? ? ? ? ? ? height: 30px;
  56. ? ? ? ? ? ? ? ? ? ? background: #ccc;
  57. ? ? ? ? ? ? ? ? }
  58. ? ? ? ? ? ? }
  59. ? ? ? ? }
  60. ? ? }
  61. }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持w3xue。

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号