本文实例为大家分享了React实现二级联动的具体代码，供大家参考，具体内容如下
js代码
import { Component } from 'react'
import './linkage.less'
class Linkage extends Component {
constructor(...args) {
super(...args)
// 添加左侧
this.FnButtonList = []
//添加右侧
this.FnContentList = []
// 开关
this.ScrollBys = true
// 在constructor中直接执行——>react更新时才会渲染——>componentDidMount时才能触发获取
this.init()
}
init() {
this.FnSetButton(20)
// 右侧的渲染
this.FnSetContent(20)
this.state = {
ButtonList: this.FnButtonList,
ContentList: this.FnContentList,
// 下标
ButtonListIndex: 0,
}
}
componentDidMount() {
this.EveryHeight = this.refs['linkage-button-list'].children[0].offsetHeight
}
// 随机数
FnSetRandom(m, n) {
return parseInt(Math.random() * (m - n) + n);
}
// 渲染左侧的按钮
FnSetButton(n) {
for (var i = 0; i < n; i++) {
this.FnButtonList.push({
id: `按钮${i}`,
text: `按钮${i}`
})
}
}
// 渲染右侧内容
FnSetContent(n) {
let ContTop = 0;//第一个元素距离页面顶部的距离
let Random = this.FnSetRandom(750, 1400)
for (let i = 0; i < n; i++) {
this.FnContentList.push({
height: Random,
id: `内容${i}`,
text: `内容${i}`,
top: ContTop,
});
ContTop += Random;
}
}
Fncurrn(index) {
if (index > 3) {
this.refs["linkage-button"].scrollTop = (index - 3) * this.EveryHeight;
}
if (index <= 3) {
this.refs["linkage-button"].scrollTop = 0;
}
}
// 点击
FnButtonTab(index) {
this.ScrollBys = false
this.setState({
ButtonListIndex: index
})
this.refs["linkage-content"].scrollTop = this.state.ContentList[index].top;
//点击居中
this.Fncurrn(index)
}
//右边滚动左边
FnScroll(ev) {
this.ContTop = ev.target.scrollTop
if (this.ScrollBys) {
let n = 0
for (let i = 0; i < this.state.ContentList.length; i++) {
if (
this.refs["linkage-content"].scrollTop >= this.state.ContentList[i].top
) {
//盒子滚动的距离如果大于右边盒子里的元素距离页面顶部的距离
n = i;
}
}
this.setState({
ButtonListIndex: n
})
if (Math.abs(n - this.state.ButtonListIndex) === 1) {
this.setState({
ButtonListIndex: n
})
//滚动居中
this.Fncurrn(n)
}
}
if (this.ContTop == this.state.ContentList[this.state.ButtonListIndex].top) {
this.ScrollBys = true
}
}
render() {
return (
<div className="linkage">
<div className="linkage-button" ref="linkage-button">
<div className="linkage-button-list" ref="linkage-button-list">
{this.state.ButtonList.map((item, index) => <div
key={item.id}
className={this.state.ButtonListIndex == index ? 'linkage-button-item ac' : 'linkage-button-item'}
onClick={this.FnButtonTab.bind(this, index)}
>
{item.text}
</div>)}
</div>
</div>
<div className="linkage-content" ref="linkage-content" onScroll={this.FnScroll.bind(this)}>
<div className="linkage-content-list">
{this.state.ContentList.map((item) => <div
className="linkage-content-item"
key={item.id}
style={{ height: item.height + 'px' }}
>
<div className="linkage-content-title"> {item.text}</div>
</div>)}
</div >
</div >
</div >
)
}
}
export default Linkage
css文件
body {
margin: 0;
}
.linkage {
width: 100vw;
height: 100vh;
display: flex;
.linkage-button {
width: 20vw;
height: 100vh;
background: chocolate;
text-align: center;
font-size: 40px;
color: #fff;
overflow: scroll;
scroll-behavior: smooth;
.linkage-button-list {
width: 20vw;
.linkage-button-item.ac {
background: lightblue;
}
.linkage-button-item {
width: 20vw;
height: 10vh;
line-height: 10vh;
}
}
}
.linkage-content {
width: 80vw;
height: 100vh;
scroll-behavior: smooth;
overflow: scroll;
.linkage-content-list {
.linkage-content-item {
width: 80vw;
height: 100vh;
.linkage-content-title {
height: 6vh;
line-height: 6vh;
width: 80vw;
text-align: center;
background: chartreuse;
color: #fff;
font-size: 30px;
}
}
}
}
}
.linkage-button::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
.linkage-content::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持华域联盟。
您可能感兴趣的文章:
本文由 华域联盟 原创撰写：华域联盟 » React实现二级联动(左右联动)
转载请保留出处和原文链接：https://www.cnhackhy.com/81369.htm
