反应滑动的旋转旋转旋转循环通过滚动事件通过滑动 - react js，javaScript

Question

这是我正在使用的旋转木马：react-slick

我希望能够使用鼠标向上或向下滚动事件滚动浏览每张幻灯片。

向上滚动以递增，向下滚动至减少。

在网上找到了我所需要的示例 - 不确定如何将其转换为React解决方案。

示例：https：//codepen.io/grawl/pen/mmlqqb

在基于"反应"组件的方法中实现这一目标的最佳方法是什么？

这是我的反应组件：

import React from 'react';
import PropTypes from 'prop-types';
import styles from './styles.css';
import ReactSVG from 'react-svg';
import Slider from 'react-slick';

import MobileSVG from '../../../assets/svg/icons/Mobile_Icon_Option2.svg';
import TabletSVG from '../../../assets/svg/icons/Tablet_Icon_Option2.svg';
import DesktopSVG from '../../../assets/svg/icons/Desktop_Icon_Option2.svg';
const deviceIcons = {'mobile': MobileSVG, 'tablet': TabletSVG, 'desktop': DesktopSVG};
import BackToTopButton from '../BackToTopButton';
export default class ProductComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        };
    }
    render() {
        const {productData} = this.props
        //Slider settings
        const settings = {
            dots: true,
            infinite: false,
            speed: 500,
            fade: true,
            arrows: false,
            centerMode: true,
            slidesToShow: 1,
            slidesToScroll: 1
        }
        //Slider items
        const sliderItems = productData.map((obj, i) => {
            return (
                <div className="product-component row" key={i}>
                    <div className="product-component-image-wrap col-xs-12 col-sm-8">
                        <span className="product-heading">{obj.category}</span>
                        <div className="product-detail-wrap">
                            <img className="product-component-image" src={`${process.env.DB_URL}${obj.image}`} />
                            <ul className="list-device-support">
                                {obj.categoryDeviceSupport.map((obj, i) => {
                                    return (<li key={i}>
                                        <span className="svg-icon">
                                            <ReactSVG path={deviceIcons[obj.value]} />
                                        </span>
                                        <span className="product-label">{obj.label}</span>
                                    </li>)
                                })}
                            </ul>
                        </div>
                    </div>
                    <div className="product-component-info col-xs-12 col-sm-3"> 
                        <span className="align-bottom">{obj.title}</span>
                        <p className="align-bottom">{obj.categoryBrief}</p>
                    </div>
                </div>
            )
        });
        return (
            <div className="product-component-wrap col-xs-12">
                <Slider {...settings}>
                    {sliderItems}
                </Slider>
                <BackToTopButton scrollStepInPx="50" delayInMs="7" />
            </div>
        )
    }
}
ProductComponent.propTypes = {
    productData: PropTypes.array
};
ProductComponent.defaultProps = {
    productData: []
};

Answer 1

您想做这样的事情：

constructor(props){
    super(props);
    this.slide = this.slide.bind(this);
}
slide(y){
    y > 0 ? (
       this.slider.slickNext()
    ) : (
       this.slider.slickPrev()
    )
}
componentWillMount(){
    window.addEventListener('wheel', (e) => {
        this.slide(e.wheelDelta);
    })
}
render(){...

并在您的滑块上添加ref：

<Slider ref={slider => this.slider = slider }>

因此，当轮子事件的y值大于0时，即向上滚动，然后显示下一个幻灯片，当向下滚动显示以前显示。

Answer 2

以下应为您工作：

componentDidMount(){
  let slickListDiv = document.getElementsByClassName('slick-list')[0]
  slickListDiv.addEventListener('wheel', event => {
    event.preventDefault()
    event.deltaY > 0 ? this.slider.slickNext() : this.slider.slickPrev()
  })
}

您应该这样初始化组件：

<Slider {...settings} ref={slider => this.slider = slider.innerSlider}>
...
</Slider>

Answer 3

我在我的CustomSlider组件中使用以下代码：

  constructor(props) {
    super(props);
    this.handleWheel = this.handleWheel.bind(this);
  }
  componentDidMount() {
    ReactDOM.findDOMNode(this).addEventListener('wheel', this.handleWheel);
  }
  componentWillUnmount() {
    ReactDOM.findDOMNode(this).removeEventListener('wheel', this.handleWheel);
  }
  handleWheel(e) {
    e.preventDefault();
    e.deltaY > 0 ? this.slider.slickNext() : this.slider.slickPrev();
  }

组件初始化

 <Slider ref={slider => this.slider = slider}>
   ...
 </Slider>

Answer 4

带钩子

const sliderRef = createRef();
const scroll = useCallback(
    y => {
      if (y > 0) {
        return sliderRef?.current?.slickNext(); /// ? <- using description below 
      } else {
        return sliderRef?.current?.slickPrev();
      }
    },
    [sliderRef]
  );
 useEffect(() => {
    window.addEventListener("wheel", e => {
      scroll(e.deltaY);
    });
  }, [scroll]);

我使用了与Babel插件连接的打字稿的可选链，但是您可以使用：

 sliderref.current＆amp; amp;sliderref.current.slicknext（）

Answer 5

我能够使用挂钩（useref获得对滑块组件的引用和使用效率来引用滑块组件（react-slick js库）的函数组件中工作将侦听器（滚动功能）添加到轮式事件）。

const myComponent () => {
 const settings = {
    dots: true,
    slidesToShow: 1,
    slidesToScroll: 1,};
const slider = useRef(null);
function scroll(e){
    if (slider === null)
        return 0;
    e.wheelDelta > 0 ? (
        slider.current.slickNext()
    ) : (
        slider.current.slickPrev()
    );
};
useEffect(() => {
    window.addEventListener("wheel", scroll,true);
    return () => {
        window.removeEventListener("wheel", scroll, true);
    };
}, []);
return (
 <Slider {...settings} ref={slider}>
 </Slider>
);
}
export default myComponent;