如何将 img 添加为触摸友好轮播组件的动态数据

问题描述

这是我写的代码：

import React,{ useEffect,useRef,useState } from 'react';

const Carousel = () => {
  const holderRef = useRef();
  const menusRef = useRef();
  const sliderRef = useRef();
  const movingProps = useRef({
    startX: undefined,endX: undefined,slideIndex: 0,moveX: undefined,touchMoveX: undefined,longTouch: undefined,slideWidth: 300,numberSlideItem: null,startSlide: false,});

  const [,setForceRender] = useState(false);

  useEffect(() => {
    if (sliderRef.current && movingProps.current.numberSlideItem === null) {
      movingProps.current.numberSlideItem = document.querySelectorAll(
        '.slide_menus .menu'
      ).length;
      movingProps.current.slideWidth = sliderRef.current.clientWidth;
      menusRef.current.style.width =
        300 * movingProps.current.numberSlideItem + 'px';
      window.addEventListener('mouseup',mouseUp);
    }
    return () => {
      window.removeEventListener('mouseup',mouseUp);
    };
  },[sliderRef]);

  const preventDefault = (e) => {
    e.preventDefault();
  };

  const mouseUpHandle = (e) => {
    const {
      numberSlideItem,slideIndex,moveX,slideWidth,} = movingProps.current;

    e.preventDefault();
    var absMove = Math.abs(slideIndex * slideWidth - moveX);
    if (absMove > slideWidth / 3) {
      if (moveX > slideIndex * slideWidth && slideIndex < numberSlideItem - 1) {
        movingProps.current.slideIndex++;
      } else if (moveX < slideIndex * slideWidth && slideIndex > 0) {
        movingProps.current.slideIndex--;
      }
    }
    menusRef.current.classList.add('animation');
    slideTranslateWhenTouch(-movingProps.current.slideIndex * slideWidth);
    setForceRender((prev) => !prev);
  };

  const mouseMoveHandle = (e) => {
    const { slideIndex,startX } = movingProps.current;
    if (movingProps.current.startSlide) {
      movingProps.current.touchMoveX = e.pageX;
      // Calculate distance to translate holder.
      movingProps.current.moveX =
        slideIndex * slideWidth + (startX - movingProps.current.touchMoveX);

      slideTranslateWhenTouch(-movingProps.current.moveX);
    }
  };

  const slideTranslateWhenTouch = (s) => {
    menusRef.current.style.transform = 'translateX(' + s + 'px)';
  };

  const mouseDown = (e) => {
    preventDefault(e);
    movingProps.current.startX = e.nativeEvent.clientX;
    movingProps.current.startSlide = true;
    menusRef.current.classList.remove('animation');
  };

  const mouseUp = (e) => {
    mouseUpHandle(e);
    movingProps.current.startSlide = false;
  };

  const setIndex = (index) => {
    movingProps.current.slideIndex = index;
    slideTranslateWhenTouch(
      -movingProps.current.slideIndex * movingProps.current.slideWidth
    );
    setForceRender((prev) => !prev);
  };

  const touchStart = (e) => {
    movingProps.current.startSlide = true;
    movingProps.current.longTouch = false;
    setTimeout(function () {
      window.slider.longTouch = true;
    },250);

    movingProps.current.startX = e.changedtouches[0].pageX;
    menusRef.current.classList.remove('animation');
  };
  const touchMove = (e) => {
    if (movingProps.current.startSlide) {
      const { slideIndex,startX } = movingProps.current;
      movingProps.current.touchMoveX = e.changedtouches[0].pageX;
      movingProps.current.moveX =
        slideIndex * slideWidth + (startX - movingProps.current.touchMoveX);
      slideTranslateWhenTouch(-movingProps.current.moveX);
    }
  };

  const touchEnd = (e) => {
    movingProps.current.startSlide = false;
    mouseUpHandle(e);
  };

这里的图像是硬编码的，上面只有一个滑动逻辑

  return (
    <div className="container">
      <div ref={sliderRef} id="slider" className="slide-wrap">
        <div
          ref={holderRef}
          id="holder"
          onMouseDown={mouseDown}
          onMouseMove={mouseMoveHandle}
          onmouseup={mouseUp}
          onTouchStart={touchStart}
          onTouchMove={touchMove}
          onTouchEnd={touchEnd}
          className="slide_holder"
        >
          <div id="menus" className="slide_menus animation" ref={menusRef}>
            <div className="menu">
              <img
                id="img"
                className="img-responsive"
                src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/GFSJVKYET2.jpg"
                alt=""
              />
            </div>
            <div className="menu">
              <img
                className="slide-img img-responsive"
                src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/FH2HGFAG69.jpg"
                alt=""
              />
            </div>
            <div className="menu">
              <img
                className="slide-img img-responsive"
                src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/FH2HGFAG69.jpg"
                alt=""
              />
            </div>
          </div>
        </div>
      </div>
      <div className="dots-list">
        <div
          onClick={() => setIndex(0)}
          className={movingProps.current.slideIndex === 0 ? 'active' : ''}
        />
        <div
          onClick={() => setIndex(1)}
          className={movingProps.current.slideIndex === 1 ? 'active' : ''}
        />
        <div
          onClick={() => setIndex(2)}
          className={movingProps.current.slideIndex === 2 ? 'active' : ''}
        />
      </div>
    </div>
  );
};

export default Carousel;

我想要做的只是让这些 imgs 和 dots 动态组件不是硬编码我只是希望这些图像在不同的组件中，如果我添加一个它会自动将它们添加到滑块中

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）