快捷導(dǎo)航

React實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)效果(樓梯效果)

更新時(shí)間：2021年09月10日 10:34:43 作者：燃燒的冰山..

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

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

模仿餓了么實(shí)現(xiàn)一個(gè)二級(jí)聯(lián)動(dòng)的效果；

import "../css/Leftrightlinkage.less";
import React, { Component } from "react";
 
export default class Leftrightlinkage 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" },
      ],
      LeftList: [
        { id: 1, title: "列表1", height: 600 },
        { id: 2, title: "列表2", height: 600 },
        { id: 3, title: "列表3", height: 600 },
        { id: 4, title: "列表4", height: 600 },
        { id: 5, title: "列表5", height: 600 },
        { id: 6, title: "列表6", height: 600 },
        { id: 7, title: "列表7", height: 600 },
        { id: 8, title: "列表8", height: 600 },
        { id: 9, title: "列表9", height: 600 },
        { id: 10, title: "列表10", height: 600 },
      ],
      curr: 0, //存儲(chǔ)下標(biāo)
    };
 
    // 默認(rèn)添加一個(gè) 因?yàn)榈谝粋€(gè)的scrollTop值是0
    this.LeftHeight = [0];
    // 滾動(dòng)的開(kāi)關(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;
      this.LeftHeight.push(this.Height);
    }
  }
  //   點(diǎn)擊左側(cè)列表 點(diǎn)擊獲取下標(biāo)
  FnTable(index) {
    // 點(diǎn)擊的時(shí)候讓右邊的滾動(dòng)事件為false
    this.Swich = false;
    // 存儲(chǔ)下標(biāo)
    this.setState({
      curr: index,
    });
    // 根據(jù)下標(biāo)取出數(shù)組中對(duì)應(yīng)下標(biāo)的scrollTop值  就讓右邊的scrollTop為數(shù)組中取出的值
    this.refs["leftItem"].scrollTop = this.LeftHeight[index];
  }
  FnScroll() {
    // 監(jiān)聽(tīng)滾動(dòng)
    this.scrollTop = this.refs["leftItem"].scrollTop;
 
    // 這邊用開(kāi)關(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ù)組中的值相等 開(kāi)關(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="list-left">
            {this.state.list.map((item, index) => (
              <div
                className="left-item"
                ref="scrollLeft"
                className={this.state.curr === index ? "active" : "left-item"}
                key={item.id}
                onClick={this.FnTable.bind(this, index)}
              >
                {item.title}
              </div>
            ))}
          </div>
          <div
            className="list-right"
            ref="leftItem"
            onScroll={this.FnScroll.bind(this)}
          >
            {this.state.LeftList.map((item) => (
              <div
                className="right-item"
                key={item.id}
                style={{ height: item.height }}
              >
                <div className="item-title">{item.title}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }
}

CSS樣式，文件格式是Less格式

 .box {
     width: 100vw;
     height: 100vh;
 
     .scroll {
         width: 100vw;
         height: 100vh;
         display: flex;
 
         .list-left {
             width: 200px;
             height: 100vh;
             background: rgb(151, 151, 151);
 
             .left-item {
                 height: 120px;
                 text-align: center;
                 line-height: 120px;
                 color: #ffffff;
                 font-size: 36px;
                 border: 3px solid #ffffff;
                 box-sizing: border-box;
             }
 
             .active {
                 height: 120px;
                 text-align: center;
                 line-height: 120px;
                 color: #ffffff;
                 font-size: 36px;
                 border: 3px solid #ffffff;
                 background-color: #f100d9;
                 box-sizing: border-box;
             }
         }
 
         .list-right {
             width: 100vw;
             height: 100vh;
             background-color: #15ff00;
             overflow: scroll;
 
             .right-item {
                 height: 400px;
                 border: 5px solid #0040ff;
                 font-size: 40px;
                 color: #ffffff;
                 box-sizing: border-box;
             }
         }
     }
 
 }

效果圖：