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

This article is about how react achieves secondary linkage in the navigation bar. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

The details are as follows

Effect picture

Js code

Import {Component} from "react" Import'. / scroll.less' class Scroll 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: 'listing 6'}, {id: 7, title: 'listing 7'}, {id: 8, title: 'listing 8'} {id: 9, title: 'listing 9'}, {id: 10, title: 'list 10'}, {id: 11, title: 'list 11'}, {id: 12, title: 'list 12'}, {id: 13, title: 'list 13'} {id: 14, title: 'list 14'}, {id: 15, title: 'list 15'}, {id: 16, title: 'list 16'}, {id: 17, title: 'list 17'},], LeftList: [{id: 1 Title: 'listing 1, height: 800}, {id: 2, title:' listing 2, height: 600}, {id: 3, title: 'listing 3, height: 500}, {id: 4, title:' list 4, height: 900}, {id: 5, title: 'list 5, height: 450} {id: 6, title: 'listing 6, height: 300}, {id: 7, title:' listing 7, height: 900}, {id: 8, title: 'listing 8, height: 1010}, {id: 9, title:' listing 9, height: 300}, {id: 10, title: 'list 10' Height: 600}, {id: 11, title: 'list 11, height: 400}, {id: 12, title:' list 12, height: 760}, {id: 13, title: 'list 13, height: 580}, {id: 14, title:' list 14, height: 630}, {id: 15 Title: 'list 15, height: 540}, {id: 16, title:' list 16, height: 983}, {id: 17, title: 'list 17, height: 610},], curr: 0 / / Storage subscript} / / add one by default because the first scrolltop value is 0 this.LeftHeight = [0] / / scrolling switch this.Swich = true} / / rendering is complete to get the distance from the top of each list componentDidMount () {/ / defined as 0 can be looped up each time That is, 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) } } // 点击左侧列表 点击获取下标 fnTab(Ind) { // 点击的时候让右边的滚动事件为false this.Swich = false // 存储下标 this.setState({ curr: Ind }) // 根据下标取出数组中对应下标的scrollTop值 就让右边的scrollTop为数组中取出的值 this.refs['rightItem'].scrollTop = this.LeftHeight[Ind]; // this.refs.scrollLeft.scrollTop = this.state.curr - 4 * 58.89 } FnScroll() { // 监听滚动 this.scrollTop = this.refs['rightItem'].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})}} export default Scroll

Less code

* {margin: 0; padding: 0;} .box {width: 100vW; height: 100vh; background: red;. Lists {width: 100vW; height: 100vh; display: flex; / / right list. Scroll-right {width: 25vW; background: aqua; font-size: 28px; height: 100vh Overflow-y: auto;. Right-item {width: 25vW; height: 80px; text-align: center; line-height: 80px; border-bottom: 1px solid # ccc;} .active {height: 80px Text-align: center; line-height: 80px; background: # 0f0;}} / / left content. Scroll-left {width: 75vW; height: 100vh; overflow-y: auto / / more silky scrolling scroll-behavior: smooth;. Left-item {width: 75vW; font-size: 30px; text-align: center;. Item-title {height: 30px; background: # ccc Thank you for your reading! This is the end of the article on "how to achieve the secondary linkage of the navigation bar 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, you can 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.