React实现二级联动效果(楼梯效果)

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

模仿饿了么实现一个二级联动的效果;

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: "列表1" },
        { id: 2, title: "列表2" },
        { id: 3, title: "列表3" },
        { id: 4, title: "列表4" },
        { id: 5, title: "列表5" },
        { id: 6, title: "列表6" },
        { id: 7, title: "列表7" },
        { id: 8, title: "列表8" },
        { id: 9, title: "列表9" },
        { id: 10, title: "列表10" },
      ],
      LeftList: [
        { id: 1, title: "列表1", height: 600 },
        { id: 2, title: "列表2", height: 600 },
        { id: 3, title: "列表3", height: 600 },
        { id: 4, title: "列表4", height: 600 },
        { id: 5, title: "列表5", height: 600 },
        { id: 6, title: "列表6", height: 600 },
        { id: 7, title: "列表7", height: 600 },
        { id: 8, title: "列表8", height: 600 },
        { id: 9, title: "列表9", height: 600 },
        { id: 10, title: "列表10", height: 600 },
      ],
      curr: 0, //存储下标
    };

    // 默认添加一个 因为第一个的scrollTop值是0
    this.LeftHeight = [0];
    // 滚动的开关
    this.Swich = true;
  }

  // 渲染完成获取每一个列表距离顶部的距离
  componentDidMount() {
    // 定义为0 每次就可以循环加起来就是盒子距离顶部的距离
    this.Height = 0;
    // 循环获取每一个的高
    for (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;
        }
      }
      // 存储下标
      this.setState({
        curr: num,
      });
    }
    // 判断滚动的值和数组中的值相等 开关为true
    if (this.scrollTop == this.LeftHeight[this.state.curr]) {
      setTimeout(() => {
        this.Swich = true;
      });
    }
  }

  render() {
    return (
      <div className="box">
        <div className="scroll">
          <div className="list-left">
            {this.state.list.map((item, index) => (
              <div
                className="left-item"
                ref="scrollLeft"
                className={this.state.curr === index ? "active" : "left-item"}
                key={item.id}
                onClick={this.FnTable.bind(this, index)}
              >
                {item.title}
              </div>
            ))}
          </div>
          <div
            className="list-right"
            ref="leftItem"
            onScroll={this.FnScroll.bind(this)}
          >
            {this.state.LeftList.map((item) => (
              <div
                className="right-item"
                key={item.id}
                style={{ height: item.height }}
              >
                <div className="item-title">{item.title}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }
}

CSS样式,文件格式是Less格式

 .box {
     width: 100vw;
     height: 100vh;

     .scroll {
         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;
             }
         }
     }

 }

效果图:

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

(0)

相关推荐

  • React实现二级联动的方法

    本文实例为大家分享了React实现二级联动的具体代码,供大家参考,具体内容如下 实现效果: 普通h5页,图片我进行了裁剪,把用户那部分删掉了,不过也不影响说明 大体思路就是把数据接口从页面传给组件,交互在组件内执行后,通过onTimeChange将选择的数据结果返回给页面,然后展示到页面上. 我用Taro写的,语法和react一样. 小程序效果 好久以前的一个方法,给大家发下实现代码: 1.页面里有一个选择时间的弹框模块 {this.state.isToggleOn && ( <Pa

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

    本文实例为大家分享了React实现二级联动的具体代码,供大家参考,具体内容如下 js代码 import { Component } from 'react' import './linkage.less' class Linkage extends Component { constructor(...args) { super(...args) // 添加左侧 this.FnButtonList = [] //添加右侧 this.FnContentList = [] // 开关 this.Sc

  • React+ts实现二级联动效果

    本文实例为大家分享了React+ts实现二级联动效果的具体代码,供大家参考,具体内容如下 .tsx文件 import { Component, createRef} from 'react' import './index.less' interface State { top: any ButtonList: Button[] ContentList: Content[] ButtonIndex: number } interface Button { id: string text: str

  • React实现二级联动效果(楼梯效果)

    本文实例为大家分享了React实现二级联动效果的具体代码,供大家参考,具体内容如下 模仿饿了么实现一个二级联动的效果: import "../css/Leftrightlinkage.less"; import React, { Component } from "react"; export default class Leftrightlinkage extends Component { constructor(...args) { super(...args

  • React实现二级联动效果(楼梯效果)

    本文实例为大家分享了React实现二级联动效果的具体代码,供大家参考,具体内容如下 模仿饿了么实现一个二级联动的效果: import "../css/Leftrightlinkage.less"; import React, { Component } from "react"; export default class Leftrightlinkage extends Component { constructor(...args) { super(...args

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

    本文实例为大家分享了React实现二级联动的具体代码,供大家参考,具体内容如下 js代码 import { Component } from 'react' import './linkage.less' class Linkage extends Component { constructor(...args) { super(...args) // 添加左侧 this.FnButtonList = [] //添加右侧 this.FnContentList = [] // 开关 this.Sc

  • j2ee之AJAX二级联动效果

    本文实例为大家分享了AJAX二级联动效果的具体代码,供大家参考,具体内容如下 Ajax.js var createAjax = function(){ var ajax = null; try{ ajax = new ActiveXObject("microsoft.xmlhttp"); }catch(e1){ try{ ajax = new XMLHttpRequest(); }catch(e2){ alert("请换掉你的浏览器"); } } return aj

  • 基于Javascript实现二级联动菜单效果

    本文实例为大家分享了Javascript实现二级联动菜单效果的对应代码,具体内容如下 效果图如下: 具体实现步骤如下: 1.所用js代码如下: <script type="text/javascript"> var arr_province=["请选择省份/城市","北京市","上海市","天津市","河南省","山东省","河北省"]

  • 用户管理的设计_jquery的ajax实现二级联动效果

    页面效果 实现步骤 1.引入struts整合json的插件包 2.页面使用jquery的ajax调用二级联动的js //ajax的二级联动,使用选择的所属单位,查询该所属单位下对应的单位名称列表 function findJctUnit(o){ //货物所属单位的文本内容 var jct = $(o).find("option:selected").text(); $.post("elecUserAction_findJctUnit.do",{"jctID

  • js实现的下拉框二级联动效果

    本文实例讲述了js实现的下拉框二级联动效果.分享给大家供大家参考,具体如下: <script language="JavaScript" type="text/javascript"> <!-- /* * 说明:将指定下拉列表的选项值清空 * 转自:Gdong Elvis ( http://www.gdcool.net ) * * @param {String || Object]} selectObj 目标下拉选框的名称或对象,必须 */ fun

随机推荐