您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)React如何實(shí)現(xiàn)二級聯(lián)動效果,小編覺得挺實(shí)用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
具體內(nèi)容如下
模仿餓了么實(shí)現(xiàn)一個二級聯(lián)動的效果;
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, //存儲下標(biāo) }; // 默認(rèn)添加一個 因?yàn)榈谝粋€的scrollTop值是0 this.LeftHeight = [0]; // 滾動的開關(guān) this.Swich = true; } // 渲染完成獲取每一個列表距離頂部的距離 componentDidMount() { // 定義為0 每次就可以循環(huán)加起來就是盒子距離頂部的距離 this.Height = 0; // 循環(huán)獲取每一個的高 for (var i = 0; i < this.state.LeftList.length - 1; i++) { this.Height += this.state.LeftList[i].height; this.LeftHeight.push(this.Height); } } // 點(diǎn)擊左側(cè)列表 點(diǎn)擊獲取下標(biāo) FnTable(index) { // 點(diǎn)擊的時候讓右邊的滾動事件為false this.Swich = false; // 存儲下標(biāo) this.setState({ curr: index, }); // 根據(jù)下標(biāo)取出數(shù)組中對應(yīng)下標(biāo)的scrollTop值 就讓右邊的scrollTop為數(shù)組中取出的值 this.refs["leftItem"].scrollTop = this.LeftHeight[index]; } FnScroll() { // 監(jiān)聽滾動 this.scrollTop = this.refs["leftItem"].scrollTop; // 這邊用開關(guān)判斷是否執(zhí)行 if (this.Swich) { // 存放下標(biāo) let num = 0; // 循環(huán)取出數(shù)組中的數(shù)值 for (var i = 0; i < this.LeftHeight.length - 1; i++) { if (this.scrollTop >= this.LeftHeight[i]) { num = i; } } // 存儲下標(biāo) this.setState({ curr: num, }); } // 判斷滾動的值和數(shù)組中的值相等 開關(guān)為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; } } } }
效果圖:
關(guān)于“React如何實(shí)現(xiàn)二級聯(lián)動效果”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。