react實(shí)現(xiàn)導(dǎo)航欄二級(jí)聯(lián)動(dòng)

更新時(shí)間：2022年03月08日 09:54:12 作者：至_臻

這篇文章主要為大家詳細(xì)介紹了react實(shí)現(xiàn)導(dǎo)航欄二級(jí)聯(lián)動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了react實(shí)現(xiàn)導(dǎo)航欄二級(jí)聯(lián)動(dòng)的具體代碼，供大家參考，具體內(nèi)容如下

效果圖

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,//存儲(chǔ)下標(biāo)
? ? ? ? }
? ? ? ? // 默認(rèn)添加一個(gè) 因?yàn)榈谝粋€(gè)的scrollTop值是0
? ? ? ? this.LeftHeight = [0]
? ? ? ? // 滾動(dòng)的開關(guān)
? ? ? ? this.Swich = true
? ? }
? ? // 渲染完成獲取每一個(gè)列表距離頂部的距離
? ? componentDidMount() {
? ? ? ? // 定義為0 每次就可以循環(huán)加起來(lái)就是盒子距離頂部的距離
? ? ? ? this.Height = 0
? ? ? ? // 循環(huán)獲取每一個(gè)的高
? ? ? ? for (var i = 0; i < this.state.LeftList.length - 1; i++) {
? ? ? ? ? ? this.Height += this.state.LeftList[i].height
? ? ? ? ? ? // 將它添加到數(shù)組中
? ? ? ? ? ? this.LeftHeight.push(this.Height)
? ? ? ? }
? ? }
? ? // ? 點(diǎn)擊左側(cè)列表 點(diǎn)擊獲取下標(biāo)
? ? fnTab(Ind) {
? ? ? ? // 點(diǎn)擊的時(shí)候讓右邊的滾動(dòng)事件為false
? ? ? ? this.Swich = false
? ? ? ? // 存儲(chǔ)下標(biāo)
? ? ? ? this.setState({
? ? ? ? ? ? curr: Ind
? ? ? ? })
? ? ? ? // 根據(jù)下標(biāo)取出數(shù)組中對(duì)應(yīng)下標(biāo)的scrollTop值 ?就讓右邊的scrollTop為數(shù)組中取出的值
? ? ? ? this.refs['rightItem'].scrollTop = this.LeftHeight[Ind];
?
? ? ? ? // this.refs.scrollLeft.scrollTop = this.state.curr - 4 * 58.89
? ? }
? ? FnScroll() {
? ? ? ? // 監(jiān)聽滾動(dòng)
? ? ? ? this.scrollTop = this.refs['rightItem'].scrollTop
? ? ? ? // 這邊用開關(guān)判斷是否執(zhí)行
? ? ? ? if (this.Swich) {
? ? ? ? ? ? // 存放下標(biāo)
? ? ? ? ? ? let num = 0
? ? ? ? ? ? // 循環(huán)取出數(shù)組中的數(shù)值
? ? ? ? ? ? for (var i = 0; i < this.LeftHeight.length - 1; i++) {
? ? ? ? ? ? ? ? if (this.scrollTop >= this.LeftHeight[i]) {
? ? ? ? ? ? ? ? ? ? num = i
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? // 存儲(chǔ)下標(biāo)
? ? ? ? ? ? this.setState({
? ? ? ? ? ? ? ? curr: num
? ? ? ? ? ? })
? ? ? ? }
? ? ? ? // 判斷滾動(dòng)的值和數(shù)組中的值相等 開關(guān)為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;
? ? ? ? ? ? }
? ? ? ? }
?
? ? ? ? // 左邊內(nèi)容
? ? ? ? .scroll-left {
? ? ? ? ? ? width: 75vw;
? ? ? ? ? ? height: 100vh;
? ? ? ? ? ? overflow-y: auto;
? ? ? ? ? ? //滾動(dòng)的更加絲滑
? ? ? ? ? ? scroll-behavior: smooth;
?
? ? ? ? ? ? .left-item {
? ? ? ? ? ? ? ? width: 75vw;
? ? ? ? ? ? ? ? font-size: 30px;
? ? ? ? ? ? ? ? text-align: center;
?
?
? ? ? ? ? ? ? ? .item-title {
? ? ? ? ? ? ? ? ? ? height: 30px;
? ? ? ? ? ? ? ? ? ? background: #ccc;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? }
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: