React实现二级联动效果（楼梯效果） React实现二级联动效果（楼梯效

本文实例为大家分享了React实现二级联动效果的具体代码，供大家参考，具体内容如下
模仿饿了么实现一个二级联动的效果；

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, //存储下标}; // 默认添加一个因为第一个的scrollTop值是0this.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); }}//点击左侧列表点击获取下标FnTable(index) {// 点击的时候让右边的滚动事件为falsethis.Swich = false; // 存储下标this.setState({curr: index,}); // 根据下标取出数组中对应下标的scrollTop值就让右边的scrollTop为数组中取出的值this.refs["leftItem"].scrollTop = this.LeftHeight[index]; }FnScroll() {// 监听滚动this.scrollTop = this.refs["leftItem"].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,}); }// 判断滚动的值和数组中的值相等开关为trueif (this.scrollTop == this.LeftHeight[this.state.curr]) {setTimeout(() => {this.Swich = true; }); }} render() {return ({this.state.list.map((item, index) => ({item.title}))}{this.state.LeftList.map((item) => ({item.title}))}); }}

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; }}} }

效果图：