- import { Component } from "react";
- import './scroll.less'
- ?
- class Scroll 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' },
- ? ? ? ? ? ? ? ? { id: 11, title: '列表11' },
- ? ? ? ? ? ? ? ? { id: 12, title: '列表12' },
- ? ? ? ? ? ? ? ? { id: 13, title: '列表13' },
- ? ? ? ? ? ? ? ? { id: 14, title: '列表14' },
- ? ? ? ? ? ? ? ? { id: 15, title: '列表15' },
- ? ? ? ? ? ? ? ? { id: 16, title: '列表16' },
- ? ? ? ? ? ? ? ? { id: 17, title: '列表17' },
- ? ? ? ? ? ? ],
- ? ? ? ? ? ? LeftList: [
- ? ? ? ? ? ? ? ? { id: 1, title: '列表1', height: 800 },
- ? ? ? ? ? ? ? ? { id: 2, title: '列表2', height: 600 },
- ? ? ? ? ? ? ? ? { id: 3, title: '列表3', height: 500 },
- ? ? ? ? ? ? ? ? { id: 4, title: '列表4', height: 900 },
- ? ? ? ? ? ? ? ? { id: 5, title: '列表5', height: 450 },
- ? ? ? ? ? ? ? ? { id: 6, title: '列表6', height: 300 },
- ? ? ? ? ? ? ? ? { id: 7, title: '列表7', height: 900 },
- ? ? ? ? ? ? ? ? { id: 8, title: '列表8', height: 1010 },
- ? ? ? ? ? ? ? ? { id: 9, title: '列表9', height: 300 },
- ? ? ? ? ? ? ? ? { id: 10, title: '列表10', height: 600 },
- ? ? ? ? ? ? ? ? { id: 11, title: '列表11', height: 400 },
- ? ? ? ? ? ? ? ? { id: 12, title: '列表12', height: 760 },
- ? ? ? ? ? ? ? ? { id: 13, title: '列表13', height: 580 },
- ? ? ? ? ? ? ? ? { id: 14, title: '列表14', height: 630 },
- ? ? ? ? ? ? ? ? { id: 15, title: '列表15', height: 540 },
- ? ? ? ? ? ? ? ? { id: 16, title: '列表16', height: 983 },
- ? ? ? ? ? ? ? ? { id: 17, title: '列表17', height: 610 },
- ? ? ? ? ? ? ],
- ? ? ? ? ? ? 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)
- ? ? ? ? }
- ? ? }
- ? ? // ? 点击左侧列表 点击获取下标
- ? ? fnTab(Ind) {
- ? ? ? ? // 点击的时候让右边的滚动事件为false
- ? ? ? ? this.Swich = false
- ? ? ? ? // 存储下标
- ? ? ? ? this.setState({
- ? ? ? ? ? ? curr: Ind
- ? ? ? ? })
- ? ? ? ? // 根据下标取出数组中对应下标的scrollTop值 ?就让右边的scrollTop为数组中取出的值
- ? ? ? ? this.refs['rightItem'].scrollTop = this.LeftHeight[Ind];
- ?
- ? ? ? ? // this.refs.scrollLeft.scrollTop = this.state.curr - 4 * 58.89
- ? ? }
- ? ? FnScroll() {
- ? ? ? ? // 监听滚动
- ? ? ? ? this.scrollTop = this.refs['rightItem'].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='scroll-right' ref='scrollLeft'>
- ? ? ? ? ? ? ? ? ? ? ? ? {this.state.list.map((item, index) => <div className='right-item' className={this.state.curr === index ? "active" : "right-item"} key={item.id} onClick={this.fnTab.bind(this, index)} >{item.title}</div>)}
- ? ? ? ? ? ? ? ? ? ? </div>
- ? ? ? ? ? ? ? ? ? ? <div className='scroll-left' ref='rightItem' onScroll={this.FnScroll.bind(this)}>
- ? ? ? ? ? ? ? ? ? ? ? ? {this.state.LeftList.map((item) => <div className='left-item' key={item.id} style={{ height: item.height }}><div className='item-title'>{item.title}</div></div>)}
- ? ? ? ? ? ? ? ? ? ? </div>
- ?
- ? ? ? ? ? ? ? ? </div>
- ? ? ? ? ? ? </div>
- ? ? ? ? )
- ? ? }
- }
- export default Scroll