index.js

import React, { Component } from 'react';
import './index.scss';

class Banner extends Component {
  navTop = 183
  prevY = 0
  state = {
    navs: [
      {
        text: '积福气',
        id: 'lucky-value'
      },
      {
        text: '幸运大抽奖',
        id: 'lucky-draw'
      },
      {
        text: '预付定金',
        id: 'deposit'
      },
      {
        text: '精品特惠',
        id: 'best-courses'
      },
      {
        text: 'AI测试',
        id: 'ai-test'
      },
      {
        text: '大咖直播',
        id: 'live'
      },
    ],
    index: 0,
  }

  // componentDidMount() {
  //   window.addEventListener('scroll', throttle(this.calcNavActive, 100))
  // }

  // componentWillUnmount() {
  //   window.removeEventListener('scroll', throttle(this.calcNavActive, 100))
  // }


  // calcNavActive = () => {
  //   const {navs, index} = this.state
  //   const y = window.scrollY
  //   let swipeDirection = y > this.prevY ? 'up' : 'down'
  //   let _index
  //   if (swipeDirection === 'up') {
  //     _index = (index + 1) >= navs.length ? index : index + 1

  //   } else {
  //     _index = (index - 1) <= 0 ? 0 : index - 1
  //   }
  //   let el = document.querySelector(`#${navs[_index].id}`)
  //   let nav = document.querySelector('#main-nav')
  //   if(el) {
  //     let top = el.offsetTop

  //     if (y <= this.navTop) {
  //       nav.classList.remove('fixed')
  //     } else {
  //       !nav.classList.contains('fixed') && nav.classList.add('fixed')
  //     }

  //     if (swipeDirection === 'up') {
  //       if (y + 30 + 30 >= top) {
  //         this.setState({
  //           index: _index
  //         })
  //       }
  //     } else {
  //       if (y + 30 + 20 <= top) {
  //         this.setState({
  //           index: _index
  //         })
  //       }
  //     }
  //     this.prevY = y
  //   }

  // }

  // toSection = (i, e) => {
  //   e.preventDefault()
  //   let top = document.querySelector(`#${this.state.navs[i].id}`).offsetTop
  //   this.setState({
  //     index: i
  //   })
  //   window.scrollTo({
  //     top: top - 60,
  //     left: 0
  //   })
  // }


  render() {
    const { toSection, navs, index, isFormal, onlyShow } = this.props;
    return (
      <div id={'main-banner'}>
        <div className={`banner ${isFormal ? 'formal_banner' : ''} ${onlyShow ? 'fc_banner' : ''}`}></div>
        <nav id={'main-nav'}>
          <ul>
            {
              navs.map((item, i) => {
                return (
                  <li key={i} className={index === i ? 'active' : ''}>
                    <a href={`#${item.id}`} onClick={(e) => toSection(i, e)}>{item.text}</a>
                  </li>
                )
              })
            }
          </ul>
        </nav>
      </div>
    )
  }
}

export default Banner