原创力文档- 1、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。。
- 2、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
- 4、该文档为VIP文档，如果想要下载，成为VIP会员后，下载免费。
- 5、成为VIP后，下载本文档将扣除1次下载权益。下载后，不支持退款、换文档。如有疑问请联系我们。
- 6、成为VIP后，您将拥有八大权益，权益包括：VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 7、VIP文档为合作方或网友上传，每下载1次， 网站将根据用户上传文档的质量评分、类型等，对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
第
React实现二级联动效果(楼梯效果)
本文实例为大家分享了React实现二级联动效果的具体代码，供大家参考，具体内容如下
模仿饿了么实现一个二级联动的效果；
import../css/Leftrightlinkage.less;
importReact,{Component}fromreact;
exportdefaultclassLeftrightlinkageextendsComponent{
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(vari=0;ithis.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){
//存放下标
letnum=0;
//循环取出数组中的数值
for(vari=0;ithis.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])
文档评论（0）