react 左右联动

最新推荐文章于 2024-07-11 16:03:41 发布

初夏七鹿

最新推荐文章于 2024-07-11 16:03:41 发布

阅读量478

点赞数

分类专栏：二级联动左右联动文章标签： react.js

本文链接：https://blog.csdn.net/m0_58875967/article/details/120158806

版权

本文介绍了如何使用React.js实现一个简单的左右联动效果，通过实例展示了具体的操作步骤和关键代码。同时，提到了CSS和Less在项目中的应用。

摘要由CSDN通过智能技术生成

简单的效果图

import React, { Component } from 'react';
import "../about/linkage.less"
export default class Linkage extends Component {
    constructor(...args) {
        super(...args);

        this.state = {
            LeftList: [
                { id: 1, title: 1 },
                { id: 1, title: 2 },
                { id: 1, title: 3 },
                { id: 1, title: 4 },
                { id: 1, title: 5 },
                { id: 1, title: 6 },

            ],
            rightList: [
                { id: 1, title: 1, height: 600 },
                { id: 1, title: 2, height: 300 },
                { id: 1, title: 3, height: 630 },
                { id: 1, title: 4, height: 800 },
                { id: 1, title: 5, height: 850 },
                { id: 1, title: 6, height: 940 },
            ],
            butIndex: 0 //储存的下标

        }
        //滚动的开关
        this.flag = true

        // this.rightTop = 0
        // 默认添加一个 因为右边第一个scrollTop值是0 
        this.scrllTop = [0]
    }
    // 渲染完成 获取每一个列表距离顶部的距离
    componentWillMount() {

        // 定义为0 每次就可以循环加起来就是盒子距离顶部的距离
        let rHeight =