Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to achieve the secondary linkage effect of React. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

The details are as follows

Imitate ele.me to achieve the effect of a secondary linkage

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: "listing 1"}, {id: 2, title: "listing 2"}, {id: 3, title: "listing 3"}, {id: 4, title: "listing 4"}, {id: 5, title: "listing 5"}, {id: 6 Title: "list 6"}, {id: 7, title: "list 7"}, {id: 8, title: "list 8"}, {id: 9, title: "list 9"}, {id: 10, title: "list 10"},], LeftList: [{id: 1, title: "list 1", height: 600} {id: 2, title: "list 2", height: 600}, {id: 3, title: "list 3", height: 600}, {id: 4, title: "list 4", height: 600}, {id: 5, title: "list 5", height: 600}, {id: 6, title: "list 6", height: 600}, {id: 7 Title: "list 7", height: 600}, {id: 8, title: "list 8", height: 600}, {id: 9, title: "list 9", height: 600}, {id: 10, title: "list 10", height: 600},], curr: 0, / / Storage subscript} / / add one by default because the first scrolltop value is 0 this.LeftHeight = [0]; / / the scrolling switch this.Swich = true;} / / the rendering completes to get the distance from the top of each list componentDidMount () {/ / defined as 0 each time it can be cycled to add up to the distance from the top of the box this.Height = 0 / / cycle to get the high for of each (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;}} / stores the subscript this.setState ({curr: num,});} / / determines that the scrolling value is equal to the value in the array and the switch is true if (this.scrollTop = = this.LeftHeight [this.state.curr]) {setTimeout (() = > {this.Swich = true;}) }} render () {return ({this.state.list.map ((item) Index) = > ({item.title}))} {this.state.LeftList.map ((item) = > ({item.title}))}) }}

CSS style, file format is Less format

.box {width: 100vW; height: 100vh; .boxes {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;}}

Effect picture:

This is the end of this article on "how to achieve secondary linkage effect in React". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.