本文实例为大家分享了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; } } } }
效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。