KeLaMaYi_H5/H5/src/pages/A1home/index.tsx

import React, { useCallback, useEffect, useRef, useState } from 'react'
import styles from './index.module.scss'
import history, { HomeDataRow, isMobileFu, myData, myUrl } from '@/utils/history'
import classNmaes from 'classnames'
import A1info from './A1info'
import { imgInitFu } from './data'
import useMove from '@/components/useMove'

declare global {
  //设置全局属性
  interface Window {
    //window对象属性
    getIndexFu: (index: number) => void
    moveFu: (val: any) => void
  }
}

function A1home() {
  // 当前索引
  const [index, setIndex] = useState(-1)

  useEffect(() => {
    window.getIndexFu = index => {
      setIndex(index)
      // console.log('当前索引', index)
    }
  }, [])

  useEffect(() => {
    imgInitFu()
  }, [])

  const moveRef = useRef<any>(null)

  useEffect(() => {
    const urlAll = window.location.href
    if (urlAll.includes('?m=')) {
      const idArr = urlAll.split('?m=')
      if (idArr && idArr[1]) {
        const id = Number(idArr[1])
        const index = myData.homeData.findIndex(v => v.id === id)
        // console.log('返回的索引', index)
        window.moveFu = val => {
          moveRef.current = val

          if ([1, 2, 3, 4, 5, 6].includes(index)) val.go(-index)
          else if ([7, 8, 9, 10, 11].includes(index)) {
            const obj = {
              11: 1,
              10: 2,
              9: 3,
              8: 4,
              7: 5
            }
            val.go(Reflect.get(obj, index))
          }
        }
      }
    }
  }, [])

  // 相关文物的滚动
  const { touchstart, touchmove, touchend, MouseLeave, isPcMoveFlag } = useMove()

  const moveFu = useCallback((val: number) => {
    moveRef.current.go(val)
  }, [])

  // 点击进入详情页
  const toInfoPage = useCallback(() => {
    if (isPcMoveFlag) {
      const id = myData.homeData[index].id
      history.replace(`/info/${id}`)
    }
  }, [index, isPcMoveFlag])

  // 打开详情
  const [open, setOpen] = useState({} as HomeDataRow)

  return (
    <div
      className={styles.A1home}
      style={{ backgroundImage: `url(${myUrl + myData.homeBg})` }}
    >
      <div className='homeTitleImg'>
        <img src={myUrl + myData.homeTitleImg} alt='' />
      </div>

      <div className='box11'>
        <div className='wrap'>
          <div id='showcase' className='noselect'>
            {myData.homeData.map((v, i) => (
              <img
                key={v.id}
                className={classNmaes('cloud9-item', i === index ? 'imgAc' : '')}
                src={myUrl + v.cover}
                alt=''
              />
            ))}
          </div>
        </div>
      </div>

      {/* <div id='nav' className='noselect'>
        <button className='left'>←</button>
        <button className='right'>→</button>
      </div> */}

      <div className='A1Text'></div>

      {/* 左右滑动 */}
      <div
        className='A1MoveBox'
        onTouchStart={e => touchstart(e.touches[0].pageX)}
        onTouchMove={e => touchmove(e.touches[0].pageX)}
        onTouchEnd={e => touchend(val => moveFu(val), 'mobile')}
        onClick={toInfoPage}
        onMouseUp={e => touchstart(e.clientX)}
        onMouseMove={e => touchmove(e.clientX)}
        onMouseDown={e => touchend(val => moveFu(val), 'pc')}
        onMouseLeave={MouseLeave}
      ></div>

      {/* 打开详情 */}
      {open.id ? <A1info info={open} closeFu={() => setOpen({} as HomeDataRow)} /> : null}
    </div>
  )
}

const MemoA1home = React.memo(A1home)

export default MemoA1home