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: string
}
interface Content {
  id: string
  text: string
  height: number
  top: number
}
interface Props {

}

class Stairs extends Component<Props, State>{
  LeftList: Button[]
  RightList: Content[]
  kaiguan: boolean
  right = createRef<HTMLDivElement>()
  left = createRef<HTMLDivElement>()
  LeftTex = createRef<HTMLDivElement>()
  // oTop: number | undefined
  viewHeight: number | undefined
  offHeight: number | undefined
  Lefttext = createRef<HTMLDivElement>()
  top: number | undefined
  oTop: number | undefined
  constructor(props: Props) {
    super(props)
    this.state = {
      ButtonList: [],
      ContentList: [],
      ButtonIndex: 0,
      top: 0
    }
    this.LeftList = []
    this.RightList = []
    this.kaiguan = true
    this.oTop = 0
  }
  componentDidMount() {
    this.BtnList(20)
    this.ConList(20)
    this.setState({
      ButtonList: this.LeftList,
      ContentList: this.RightList
    })
  }
  getRandom(m: number, n: number): number {
    return parseInt(`${Math.random() * (m - n) + n}`);
  }
  BtnList(n: number) {
    for (let i = 0; i < n; i++) {
      this.LeftList.push({
        id: `a${i}`,
        text: `按钮${i}`,
      });
    }
  }
  ConList(n: number) {
    let ConTop = 0;
    for (let i = 0; i < n; i++) {
      let RandomHeight = this.getRandom(736, 1400);
      this.RightList.push({
        id: `b${i}`,
        text: `标题${i}`,
        height: RandomHeight,
        top: ConTop,
      });
      ConTop += RandomHeight;
    }
  }
  FnScroll() {
    // console.log(11)
    if (this.right.current) {
      this.oTop = this.right.current.scrollTop;
      if (this.kaiguan) {
        // console.log(111)
        let count = 0
        for (var i = 0; i < this.state.ContentList.length; i++) {
          if (this.oTop >= this.state.ContentList[i].top) {
            count = i
          }
          this.setState({
            ButtonIndex: count
          })
        }
        // console.log(ButtonIndex,count)
      }
    }
    // eslint-disable-next-line
    if (this.oTop == this.state.ContentList[this.state.ButtonIndex].top) {
      this.kaiguan = true;
    }
  }
  Fn(index: any, ev: React.MouseEvent<HTMLDivElement>) {
    this.viewHeight = document.documentElement.clientHeight / 2
    let target = ev.target as HTMLDivElement
    this.offHeight = target.offsetTop
    // console.log(this.offHeight)
    if (this.offHeight > this.viewHeight) {
      if (this.LeftTex.current) {
        this.LeftTex.current.scrollTo({
          top: this.offHeight - this.viewHeight - target.clientHeight / 2,
          behavior: "smooth",
        })
      }
      // console.log(this.LeftTex.current)
    }
    // console.log(this.offHeight - this.viewHeight - target.clientHeight / 2)
    this.kaiguan = false;
    // this.offHeight = ev.target.offsetTop
    // console.log(ev.target)
    if (this.right.current) {
      this.right.current.scroll({
        top: this.RightList[index].top,
        behavior: "smooth",
      });
    }
    this.setState({
      ButtonIndex: index
    })
  }
  ButtonIndex(index: number) {
    if (index >= 3) {
      if (this.left.current && this.Lefttext.current) {
        this.left.current.scrollTop = (index - 3) * this.Lefttext.current.offsetHeight;
      }
    }
    if (index < 3) {
      if (this.left.current) {
        this.left.current.scrollTop = 0;
      }
    }
    this.setState({
      ButtonIndex: index
    })
  }

  render() {
    let footList = this.state.ButtonList
    return (
      <div>
        <div className="about">
          <div className="scroll">
            <div className="box1" ref="box1"></div>
            <div className="box2" ref="box2"></div>
            <div className="scroll-con" ref="scroll-con">
              <div className="left"  ref={this.LeftTex}>
                <div className="left-con">
                  {footList.map((item, index) =>
                    <div onClick={this.Fn.bind(this, index)} ref={this.Lefttext} className={this.state.ButtonIndex === index ? "ac left-txt" : "left-txt"} key={item.id} >
                      {item.text}
                    </div>
                  )}
                </div>
              </div>
              <div className="right" ref={this.right} onScroll={this.FnScroll.bind(this)}>
                <div className="right-con">
                  <div
                    className="right-txt"
                    ref="right-txt">
                    {this.state.ContentList.map((item) =>
                      <div style={{ height: item.height }} className="right-title" key={item.id}>{item.text} </div>
                    )}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    )

  }

}

export default Stairs

.less文件

.scroll {
  width: 100vw;
  height: 100vh;
  overflow-y: scroll;

  .box1 {
    height: 300px;
    background: #000;
    width: 100%;
  }
  .box2 {
    height: 200px;
    background: tomato;
    width: 100%;
  }
  .box3 {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    height: 100px;
    background: palevioletred;
    z-index: 999;
    width: 100%;
  }
  .scroll-con {
    width: 100vw;
    height: 100vh;
    position: -webkit-sticky;
    position: sticky;
    top: 100px;
    display: flex;
    .left,
    .right {
      height: 100vh;
      overflow-y: scroll;
    }
    .left {
      width: 20vw;
      .left-txt {
        width: 20vw;
        height: 100px;
        text-align: center;
        line-height: 100px;
        background: red;
      }
      .left-txt.ac {
        background: lightcoral;
        z-index: 999;
      }
    }
    .right {
      width: 80vw;

      .right-title {
        width: 100%;
        height: 5vh;
        background: darkblue;
        color: aqua;
        line-height: 5vh;
      }
    }
  }
}

最后把自己定义的文件夹添加到路由里即可

效果图如下

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

(0)

相关推荐

  • 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

  • React实现二级联动的方法

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

  • 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

  • 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

  • 用户管理的设计_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

  • select下拉菜单实现二级联动效果

    需求:建立年级.班级两个数据表,获取年级表信息,根据年级,获取相应的班级 效果图: 不完美的地方就是在不选择年级的时候,是不能选择任何班级的. 代码部分 首先是建立两个表的实体 需要注意的就是写注解了.代码就不贴了. DAO层代码 年级DAO 年级的DAO层没什么代码,就是继承那三个类,具体用到哪个我也不清楚,就直接都继承了. public interface GraceDAO extends PagingAndSortingRepository<Grace, String>,JpaSpeci

  • vue实现下拉框二级联动效果的实例代码

    1.实现效果 2.后端返回的数据格式 "list": [ { "id": "1178214681118568449", "title": "后端开发", "children": [ { "id": "1178214681139539969", "title": "Java" }, { "id&quo

  • 原生js二级联动效果

    今天说的这个是原生js的二级联动,在空白页面里动态添加并作出相对应的效果. //创建两个下拉列表 select标签 是下拉列表 var sel = document.createElement("select"); var sel1 = document.createElement("select"); //添加到body document.body.appendChild(sel); document.body.appendChild(sel1); // 创建一个

  • Mybatis + js 实现下拉列表二级联动效果

    一.业务需求 实现省份与城市的二级联动 二.实现效果 三.代码实现 1. province_city.jsp 前端界面实现 <%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/js

随机推荐