原创力文档- 1、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。。
- 2、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
第
React实现二级联动(左右联动)
if(this.ContTop==this.state.ContentList[this.state.ButtonListIndex].top){
this.ScrollBys=true
render(){
return(
divclassName=linkage
divclassName=linkage-buttonref=linkage-button
divclassName=linkage-button-listref=linkage-button-list
{this.state.ButtonList.map((item,index)=div
key={item.id}
className={this.state.ButtonListIndex==indexlinkage-button-itemac:linkage-button-item}
this.FnButtonTab.bind(this,index)}
{item.text}
/div)}
/div
/div
divclassName=linkage-contentref=linkage-contentonScroll={this.FnScroll.bind(this)}
divclassName=linkage-content-list
{this.state.ContentList.map((item)=div
className=linkage-content-item
key={item.id}
px}}
divclassName=linkage-content-title{item.text}/div
/div)}
/div
/div
/div
exportdefaultLinkage
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;/*ChromeSafari*/
.linkage-content::-webkit-scrollbar{
display:none;/*ChromeSafari*/
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
文档评论（0）