react 左右联动

简单的效果图

 

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]
    }
    // 渲染完成 获取每一个列表距离顶部的距离