欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

React实现二级联动(左右联动)

程序员文章站 2022-07-24 21:33:59
本文实例为大家分享了react实现二级联动的具体代码,供大家参考,具体内容如下js代码import { component } from 'react'import './linkage.less'c...

本文实例为大家分享了react实现二级联动的具体代码,供大家参考,具体内容如下

js代码

import { component } from 'react'
import './linkage.less'

class linkage extends component {
    constructor(...args) {
        super(...args)

        // 添加左侧
        this.fnbuttonlist = []
        //添加右侧
        this.fncontentlist = []
        // 开关
        this.scrollbys = true
        // 在constructor中直接执行——>react更新时才会渲染——>componentdidmount时才能触发获取
        this.init()

    }
    init() {
        this.fnsetbutton(20)
        // 右侧的渲染
        this.fnsetcontent(20)
        this.state = {
            buttonlist: this.fnbuttonlist,
            contentlist: this.fncontentlist,
            // 下标
            buttonlistindex: 0,
        }


    }
    componentdidmount() {
        this.everyheight = this.refs['linkage-button-list'].children[0].offsetheight
    }
    // 随机数
    fnsetrandom(m, n) {
        return parseint(math.random() * (m - n) + n);
    }
    // 渲染左侧的按钮
    fnsetbutton(n) {
        for (var i = 0; i < n; i++) {
            this.fnbuttonlist.push({
                id: `按钮${i}`,
                text: `按钮${i}`
            })
        }
    }

    // 渲染右侧内容
    fnsetcontent(n) {
        let conttop = 0;//第一个元素距离页面顶部的距离
        let random = this.fnsetrandom(750, 1400)
        for (let i = 0; i < n; i++) {
            this.fncontentlist.push({
                height: random,
                id: `内容${i}`,
                text: `内容${i}`,
                top: conttop,
            });
            conttop += random;
        }
    }

    fncurrn(index) {
        if (index > 3) {
            this.refs["linkage-button"].scrolltop = (index - 3) * this.everyheight;

        }
        if (index <= 3) {
            this.refs["linkage-button"].scrolltop = 0;
        }
    }
    // 点击
    fnbuttontab(index) {
        this.scrollbys = false
        this.setstate({
            buttonlistindex: index
        })
        this.refs["linkage-content"].scrolltop = this.state.contentlist[index].top;

        //点击居中
        this.fncurrn(index)
    }

    //右边滚动左边
    fnscroll(ev) {
        this.conttop = ev.target.scrolltop
        if (this.scrollbys) {
            let n = 0

            for (let i = 0; i < this.state.contentlist.length; i++) {
                if (
                    this.refs["linkage-content"].scrolltop >= this.state.contentlist[i].top
                ) {
                    //盒子滚动的距离如果大于右边盒子里的元素距离页面顶部的距离
                    n = i;
                }
            }
            this.setstate({
                buttonlistindex: n
            })

            if (math.abs(n - this.state.buttonlistindex) === 1) {

                this.setstate({
                    buttonlistindex: n
                })
                //滚动居中

                this.fncurrn(n)

            }
        }


        if (this.conttop == this.state.contentlist[this.state.buttonlistindex].top) {
            this.scrollbys = true
        }

    }

    render() {
        return (
            <div classname="linkage">
                <div classname="linkage-button" ref="linkage-button">
                    <div classname="linkage-button-list" ref="linkage-button-list">
                        {this.state.buttonlist.map((item, index) => <div
                            key={item.id}
                            classname={this.state.buttonlistindex == index ? 'linkage-button-item ac' : 'linkage-button-item'}
                            onclick={this.fnbuttontab.bind(this, index)}
                        >
                            {item.text}
                        </div>)}
                    </div>
                </div>
                <div classname="linkage-content" ref="linkage-content" onscroll={this.fnscroll.bind(this)}>
                    <div classname="linkage-content-list">
                        {this.state.contentlist.map((item) => <div
                            classname="linkage-content-item"
                            key={item.id}
                            style={{ height: item.height + 'px' }}
                        >
                            <div classname="linkage-content-title"> {item.text}</div>
                        </div>)}
                    </div >
                </div >
            </div >
        )
    }
}
export default linkage

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; /* chrome safari */
  }
  .linkage-content::-webkit-scrollbar {
    display: none; /* chrome safari */
  }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

相关标签: React 二级联动