本文实例为大家分享了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值是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);
}
}
// 点击左侧列表 点击获取下标
FnTable(index) {
// 点击的时候让右边的滚动事件为false
this.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,
});
}
// 判断滚动的值和数组中的值相等 开关为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;
}
}
}
}
效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。