react如何实现导航栏二级联动

发布时间:2022-03-08 13:38:39 作者:小新
来源:亿速云 阅读:303

这篇文章给大家分享的是有关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.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 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;
                }
            }
        }
    }
}

感谢各位的阅读!关于“react如何实现导航栏二级联动”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

推荐阅读:
  1. django + jquery 实现二级联动
  2. Css如何实现导航栏

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

react

上一篇:css技巧使用实例分析

下一篇:es6中箭头函数和普通函数的区别有哪些

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》